xujiecloud-vue/src/views/modules/property/available.vue

<script>
import {queryPropertyTemplateType} from "../../../api/property/template";
import {
  queryPropertyItemByPage,
  removePropertyItem,
  savePropertyItem,
  updatePropertyItem
} from "../../../api/property/propertyItem";
import BuSelect from "../../../components/selector/select/BuSelect.vue";
import {getSiteAndBuByUserName} from "../../../api/eam/eam";
import {
  queryPropertyItemAvailable, removePropertyItemAvailable,
  savePropertyItemAvailable,
  updatePropertyItemAvailable
} from "../../../api/property/propertyItemAvailable";

export default {
  name: "available",
  components: {BuSelect},
  data(){
    return{
      no:1,
      size:20,
      total:0,
      menuId:180003,
      dataList: [],
      queryLoading: false,
      templateItem:{
        id:null,
        itemNo:'',
        itemDesc:'',
        itemType:'',
        buId:null,
        valueType:'',
        valueTypeDb:'',
        defaultValue:'',
        maxValue:undefined,
        minValue:undefined,
        valueChooseFlag:'',
      },
      dataTypeList: [],
      queryForm: {

      },
      columns: [
        {
          userId: this.$store.state.user.name,
          functionId: 180003,
          serialNumber: '180003TableBuDesc',
          tableId: "180003Table",
          tableName: "属性表",
          columnProp: 'buDesc',
          headerAlign: "center",
          align: "center",
          columnLabel: 'BU',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: 80,
          sortLv: 0,
          status: true,
          fixed: '',
        },{
          userId: this.$store.state.user.name,
          functionId: 180003,
          serialNumber: '180003TableItemTypeDesc',
          tableId: "180003Table",
          tableName: "属性表",
          columnProp: 'itemTypeDesc',
          headerAlign: "center",
          align: "center",
          columnLabel: '属性类型',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: 120,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          userId: this.$store.state.user.name,
          functionId: 180003,
          serialNumber: '180003TableValueType',
          tableId: "180003Table",
          tableName: "属性表",
          columnProp: 'itemNo',
          headerAlign: "center",
          align: "left",
          columnLabel: '属性编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: 100,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          userId: this.$store.state.user.name,
          functionId: 180003,
          serialNumber: '180003TableValueType',
          tableId: "180003Table",
          tableName: "属性表",
          columnProp: 'itemDesc',
          headerAlign: "center",
          align: "left",
          columnLabel: '属性名称',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: 120,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          userId: this.$store.state.user.name,
          functionId: 180003,
          serialNumber: '180003TableValueType',
          tableId: "180003Table",
          tableName: "属性表",
          columnProp: 'valueType',
          headerAlign: "center",
          align: "center",
          columnLabel: '值类型',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: 80,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          userId: this.$store.state.user.name,
          functionId: 180003,
          serialNumber: '180003TableDefaultValue',
          tableId: "180003Table",
          tableName: "属性表",
          columnProp: 'defaultValue',
          headerAlign: "center",
          align: "right",
          columnLabel: '参照值',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: 80,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          userId: this.$store.state.user.name,
          functionId: 180003,
          serialNumber: '180003TableMaxValue',
          tableId: "180003Table",
          tableName: "属性表",
          columnProp: 'maxValue',
          headerAlign: "center",
          align: "right",
          columnLabel: '最大值',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: 80,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          userId: this.$store.state.user.name,
          functionId: 180003,
          serialNumber: '180003TableMinValue',
          tableId: "180003Table",
          tableName: "属性表",
          columnProp: 'minValue',
          headerAlign: "center",
          align: "right",
          columnLabel: '最小值',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: 80,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          userId: this.$store.state.user.name,
          functionId: 180003,
          serialNumber: '180003TableValueChooseFlag',
          tableId: "180003Table",
          tableName: "属性表",
          columnProp: 'valueChooseFlag',
          headerAlign: "center",
          align: "center",
          columnLabel: '是否值可选',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: 80,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          userId: this.$store.state.user.name,
          functionId: 180003,
          serialNumber: '180003TableCreateDate',
          tableId: '180003Table',
          tableName: '属性表',
          columnProp: 'createDate',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '创建时间',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: 100,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          userId: this.$store.state.user.name,
          functionId: 180003,
          serialNumber: '180003TableCreateBy',
          tableId: "180003Table",
          tableName: "属性表",
          columnProp: 'createBy',
          headerAlign: "center",
          align: "center",
          columnLabel: '创建人',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: 80,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          userId: this.$store.state.user.name,
          functionId: 180003,
          serialNumber: '180003TableUpdateDate',
          tableId: "180003Table",
          tableName: "属性表",
          columnProp: 'updateDate',
          headerAlign: "center",
          align: "center",
          columnLabel: '更新时间',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: 100,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          userId: this.$store.state.user.name,
          functionId: 180003,
          serialNumber: '180003TableUpdateBy',
          tableId: "180003Table",
          tableName: "属性表",
          columnProp: 'updateBy',
          headerAlign: "center",
          align: "center",
          columnLabel: '更新人',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: 80,
          sortLv: 0,
          status: true,
          fixed: '',
        },
      ],
      saveVisible:false,
      saveLoading:false,
      saveForm:{

      },
      rules:{
        buId: [
          { required: true, message: '请选择BU', trigger: 'change' }
        ],
        itemNo: [
          { required: true, message: '请输入属性编码', trigger: 'blur' }
        ],
        itemDesc: [
          { required: true, message: '请输入属性描述', trigger: 'blur' }
        ],
        itemType: [
          { required: true, message: '请选择属性类型', trigger: 'change' }
        ],
        valueType: [
          { required: true, message: '请选择值类型', trigger: 'change' }
        ],
      },
      availableVisible:false,
      availableLoading:false,
      availableForm:{

      },
      availableList:[],
      availableValueVisible:false,
      availableValue:{

      }
    }
  },
  methods:{
    handleQueryPropertyTemplateType(){
      let params = {

      }
      queryPropertyTemplateType(params).then(({data})=>{
        if (data && data.code === 0){
          this.dataTypeList = data.rows;
        }else {
          this.$message.warning(data.msg);
        }
      }).catch((error)=>{
        this.$message.error(error);
      })
    },
    handleQueryByPage(){
      let params = {
        ...this.templateItem,
        no:this.no,
        size:this.size,
        createBy: this.$store.state.user.name,
      }
      this.queryLoading = true;
      queryPropertyItemByPage(params).then(({data})=>{
        if (data && data.code === 0){
          this.dataList = data.rows;
          this.total = data.total;
        }else {
          this.$message.warning(data.msg);
        }
        this.queryLoading = false;
      }).catch((error)=>{
        this.$message.error(error);
        this.queryLoading = false;
      })
    },
    handleSizeChange(val){
      this.size = val;
      this.handleQueryByPage();
    },
    handlePageChange(val){
      this.no = val;
      this.handleQueryByPage();
    },
    handleSave(row){
      this.$nextTick(()=>{
        if (this.$refs.saveForm){
          this.$refs.saveForm.clearValidate();
        }
      })
      if (row){
        this.saveForm = {...row}
      }else {
        this.saveForm = {...this.templateItem}
        this.saveForm.valueChooseFlag = 'N';
        this.saveForm.valueType = '文本';
        this.saveForm.valueTypeDb = 'T';
        if (this.queryForm.itemType){
          this.saveForm.itemType = this.queryForm.itemType;
        }
        this.saveForm.buId = this.userBuList.length > 0 ? this.userBuList[0].id : ''
      }
      this.saveVisible = true;
    },
    handleSaveOrUpdate(){
      this.$refs.saveForm.validate((valid,obj) => {
        if (valid){
          if (this.saveForm.id){
            this.handleUpdateItem();
          }else {
            this.handleSaveItem();
          }
        }else {
          let i = 1
          for (let key in obj) {
            if (i === 1){
              this.$message.error(obj[key][0].message);
              break
            }
            i++
          }
        }
      })
    },
    handleSaveItem(){
      let params = {
        ...this.saveForm,
        createBy: this.$store.state.user.name,
      }
      if (!this.saveForm.minValue){
        params.minValue = '';
      }
      if (!this.saveForm.maxValue){
        params.maxValue = '';
      }
      this.saveLoading = true;
      savePropertyItem(params).then(({data})=>{
        if (data && data.code === 0){
          this.$message.success(data.msg);
          this.saveVisible = false;
          this.handleQueryByPage();
        }else {
          this.$message.warning(data.msg);
        }
        this.saveLoading = false;
      }).catch((error)=>{
        this.$message.error(error);
        this.saveLoading = false;
      })
    },
    handleUpdateItem(){
      let params = {
        ...this.saveForm,
        updateBy: this.$store.state.user.name,
      }
      if (!this.saveForm.minValue){
        params.minValue = '';
      }
      if (!this.saveForm.maxValue){
        params.maxValue = '';
      }
      this.saveLoading = true;
      updatePropertyItem(params).then(({data})=>{
        if (data && data.code === 0){
          this.$message.success(data.msg);
          this.saveVisible = false;
          this.handleQueryByPage();
        }else {
          this.$message.warning(data.msg);
        }
        this.saveLoading = false;
      }).catch((error)=>{
        this.$message.error(error);
        this.saveLoading = false;
      })
    },
    handleQueryBu(){
      let params = {
        username: this.$store.state.user.name,
      }
      getSiteAndBuByUserName(params).then(({data}) => {
        if (data && data.code === 0) {
          this.userBuList = data.rows
        }else {
          this.$message.warning(data.message)
        }
      }).catch((error)=>{
        this.$message.error(error)
      })
    },
    handleRemove(row){
      this.$alert('确认删除该属性吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          id: row.id,
        }
        this.saveLoading = true;
        removePropertyItem(params).then(({data}) => {
          if (data && data.code === 0) {
            this.$message.success(data.msg)
            this.handleQueryByPage()
          } else {
            this.$message.warning(data.msg)
          }
          this.saveLoading = false
        }).catch((error) => {
          this.$message.error(error)
          this.saveLoading = false
        })
      }).catch(() => {
      })
    },
    handleSaveAvailable(row){
      this.availableForm = {...row}
      this.availableForm.itemId = this.availableForm.id
      this.availableForm.id = null
      this.handleQueryPropertyItemAvailable();
      this.availableVisible = true;
    },
    handleSaveAvailableValue(row){
      if (row){
        this.availableValue = {...row}
      }else {
        this.availableValue = {
          ...this.availableForm,
          availableValue:undefined,
        }
      }
      this.availableValueVisible = true;
    },
    handleQueryPropertyItemAvailable(){
      let params = {
        itemId: this.availableForm.itemId,
      }
      queryPropertyItemAvailable(params).then(({data})=>{
        if (data && data.code === 0){
          this.availableList = data.rows;
        }else {
          this.$message.warning(data.msg);
        }
      }).catch((error)=>{
        this.$message.error(error);
      })
    },
    handleSaveItemAvailableValue(){
      if (this.availableValue.id){
        this.availableValue.updateBy = this.$store.state.user.name
        updatePropertyItemAvailable(this.availableValue).then(({data})=>{
          if (data && data.code === 0){
            this.$message.success(data.msg)
            this.availableValueVisible = false;
            this.handleQueryPropertyItemAvailable();
          } else {
            this.$message.warning(data.msg)
          }
        }).catch((error)=>{
          this.$message.error(error)
        })
      }else {
        this.availableValue.createBy = this.$store.state.user.name
        savePropertyItemAvailable(this.availableValue).then(({data})=>{
          if (data && data.code === 0){
            this.$message.success(data.msg)
            this.availableValueVisible = false;
            this.handleQueryPropertyItemAvailable();
          } else {
            this.$message.warning(data.msg)
          }
        }).catch((error)=>{
          this.$message.error(error)
        })
      }
    },
    handleRemoveAvailableValue(row){
      this.$confirm('确认删除该可选值吗？', '提示', {}).then(() => {
        removePropertyItemAvailable(row).then(({data})=>{
          if (data && data.code === 0){
            this.$message.success(data.msg)
            this.availableValueVisible = false;
            this.handleQueryPropertyItemAvailable();
          } else {
            this.$message.warning(data.msg)
          }
        }).catch((error)=>{
          this.$message.error(error)
        })
      })
    },
    changeValueType(val){
      this.saveForm.minValue = undefined;
      this.saveForm.maxValue = undefined;
    }
  },
  created() {
    this.queryForm = {...this.templateItem}
    this.handleQueryPropertyTemplateType();
    this.handleQueryByPage();
    this.handleQueryBu();
  },
  watch:{
    'saveForm.itemNo'(newVal, oldVal){
      this.saveForm.itemNo = newVal.toUpperCase();
    },
    'templateItem.itemNo'(newVal, oldVal){
      this.templateItem.itemNo = newVal.toUpperCase();
    },
    'saveForm.valueType'(newVal, oldVal){
      if (newVal === '文本'){
        this.saveForm.valueTypeDb = 'T'
      }else {
        this.saveForm.valueTypeDb = 'N'
      }
    }
  }
}
</script>

<template>
  <div>
    <div style="width: 1000px">
      <el-form :model="templateItem" label-position="top">
        <el-row :gutter="10">
          <el-col :span="4">
            <el-form-item label="属性编码">
              <el-input v-model="templateItem.itemNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="属性描述">
              <el-input v-model="templateItem.itemDesc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="属性类型">
              <el-select v-model="templateItem.itemType" style="width: 100%;">
                <el-option label="全部" value=""></el-option>
                <el-option :label="item.functionTypeDesc" :value="item.functionType" v-for="item in dataTypeList" :key="item.functionType"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label=" ">
              <el-button type="primary" @click="handleQueryByPage">查询</el-button>
              <el-button type="primary" @click="handleSave(null)">新增</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table :data="dataList" style="width: 100%" border v-loading="queryLoading" height="80vh">
      <el-table-column
        v-for="(item,index) in columns" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed==''?false:item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="!item.columnHidden">
            <template v-if="item.columnProp==='valueType'">{{ scope.row[item.columnProp]}}</template>
            <template v-else-if="item.columnProp==='valueChooseFlag'">{{ scope.row[item.columnProp] === 'Y' ? '是' : '否' }}</template>
            <template v-else>{{ scope.row[item.columnProp] }}</template>
          </span>
          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="160"
        label="操作">
        <template slot-scope="scope">
          <a @click="handleSave(scope.row)">编辑</a>
          <a @click="handleRemove(scope.row)">删除</a>
          <a v-if="scope.row.valueChooseFlag === 'Y'" @click="handleSaveAvailable(scope.row)">可选值</a>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange"
                   @current-change="handlePageChange"
                   :current-page="no"
                   :page-sizes="[20, 50, 100, 200, 500]"
                   :page-size="size"
                   :total="total"
                   layout="total,sizes, prev, pager, next, jumper">

    </el-pagination>

    <el-dialog title="属性信息" :close-on-click-modal="false" v-drag :visible.sync="saveVisible" width="500px">
      <el-form :model="saveForm" ref="saveForm" :rules="rules" label-position="top" label-width="100px">
        <el-row :gutter="10">
          <el-col :span="16">
            <el-form-item label="BU" prop="buId" :show-message="false">
              <bu-select v-model="saveForm.buId" :disabled="saveForm.id > 0"></bu-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="属性编码" prop="itemNo" :show-message="false">
              <el-input v-model="saveForm.itemNo" :disabled="saveForm.id"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="属性描述" prop="itemDesc" :show-message="false">
              <el-input v-model="saveForm.itemDesc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="值类型" prop="valueType" :show-message="false">
              <el-select v-model="saveForm.valueType" style="width: 100%;" @change="changeValueType">
                <el-option label="文本" value="文本"></el-option>
                <el-option label="数字" value="数字"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="参照值" prop="defaultValue" :show-message="false">
              <el-input v-model="saveForm.defaultValue"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10" v-if="saveForm.valueType !== 'text'">
            <el-form-item label="最大值" prop="maxValue" :show-message="false">
              <el-input-number style="width: 100%;" :controls="false" :step="0" v-model="saveForm.maxValue"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="10" v-else>
            <el-form-item label="最大值" prop="maxValue" :show-message="false">
              <el-input v-model="saveForm.maxValue"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10" v-if="saveForm.valueType !== 'text'">
            <el-form-item label="最小值" prop="minValue" :show-message="false">
              <el-input-number style="width: 100%;" :controls="false" :step="0" :disabled="saveForm.valueType === 'text'" v-model="saveForm.minValue"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="10" v-else>
            <el-form-item label="最小值" prop="minValue" :show-message="false">
              <el-input v-model="saveForm.minValue"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="属性类型" prop="itemType" :show-message="false">
              <el-select v-model="saveForm.itemType" style="width: 100%;">
                <el-option :label="item.functionTypeDesc" :value="item.functionType" v-for="item in dataTypeList" :key="item.functionType"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label=" " prop="valueChooseFlag" :show-message="false">
              <el-checkbox v-model="saveForm.valueChooseFlag" :true-label="'Y'" :false-label="'N'">是否值可选</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="saveLoading" @click="handleSaveOrUpdate">确 定</el-button>
        <el-button @click="saveVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="可选值" :close-on-click-modal="false" v-drag :visible.sync="availableVisible" width="500px">
      <el-form :model="availableForm" label-position="top" >
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="属性编码" prop="itemNo" :show-message="false">
              <el-input v-model="availableForm.itemNo" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="属性描述" prop="itemDesc" :show-message="false">
              <el-input v-model="availableForm.itemDesc" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label=" " >
              <el-button type="primary" @click="handleSaveAvailableValue(null)">新增</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="availableList" border style="width: 100%" :height="300">
        <el-table-column
          prop="availableValue"
          header-align="center"
          align="left"
          min-width="200"
          label="属性值">
        </el-table-column>
        <el-table-column
          prop=""
          header-align="center"
          align="center"
          min-width="100"
          label="操作">
          <template slot-scope="scope">
            <a @click="handleSaveAvailableValue(scope.row)">修改</a>
            <a @click="handleRemoveAvailableValue(scope.row)">删除</a>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="可选值信息" :close-on-click-modal="false" v-drag :visible.sync="availableValueVisible" width="300px">
      <el-form :model="availableValue" label-position="top">
        <el-form-item label="可选值" required>
          <el-input v-model="availableValue.availableValue" v-if="availableForm.valueTypeDb === 'T'"></el-input>
          <el-input-number style="width: 100%;" :controls="false" :step="0" v-model="availableValue.availableValue" v-if="availableForm.valueTypeDb === 'N'"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="saveLoading" @click="handleSaveItemAvailableValue">确 定</el-button>
        <el-button @click="availableValueVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.el-table /deep/ .cell{
  height: auto;
  line-height: 1.5;
}
</style>