rmLayGaoujU9O46l603ccl_plm-vue/src/views/modules/code/item/itemValue.vue

<script>
import {
  queryCodeItemValueDetail,
  removeCodeItemValue, removeCodeItemValueBatch,
  saveCodeItemValue, saveCodeItemValueBatch,
  searchCodeItemValueList,
  searchCodeItemValueListItem, updateCodeItemValue
} from "../../../../api/code/codeItemValue"
import {
  editCodeConditionHeader, removeCodeConditionHeader,
  saveCodeConditionHeader,
  searchCodeConditionHeaderList
} from "../../../../api/code/codeConditionHeader";
import {searchCodeItemDefs, searchCodeItemDefsSeq} from "../../../../api/code/codeItemDef";
import {
  codeConditionDetailList, editConditionDetailList,
  removeConditionDetailList,
  saveConditionDetailList
} from "../../../../api/code/codeConditionDetail";

const rules = {}
const detailRules = {}
const itemValueRules = {}
const rulesLabel = {
  conditionDesc: "条件描述",
  conditionName: "条件名称",
  active: "是否有效",
}
const detailRulesLabel = {
  SQLStatementExecuteItem: "元素名称",
  SQLStatementExecuteValueItemNo: "元素可选值",
  SQLStatementExecuteCalculate: "运算符号",
}
const itemValueRulesLabel = {
  valueNo: "简码",
  itemValue: "值",
}
Object.keys(rulesLabel).forEach(key => {
  rules[key] = [
    {
      required: true,
      message: `${rulesLabel[key]}不能为空`,
      trigger: ['blur','input','change']
    }
  ];
});
Object.keys(itemValueRulesLabel).forEach(key => {
  itemValueRules[key] = [
    {
      required: true,
      message: `${itemValueRulesLabel[key]}不能为空`,
      trigger: ['blur','input','change']
    }
  ];
});
Object.keys(detailRulesLabel).forEach(key => {
  detailRules[key] = [
    {
      required: true,
      message: `${detailRulesLabel[key]}不能为空`,
      trigger: ['blur','input','change']
    }
  ];
});
export default {
  name: "itemValue",
  props:{
    itemValue:{
      type:Object,
      required:true
    },
  },
  data(){
    return{
      selectionDetailIndex:-1,
      conditionHeaderIndex:0,
      itemValueList:[],
      conditionHeaders:[],
      conditionDetails:[],
      saveFlag:"新增",
      saveConditionHeaderFlag:false,
      conditionHeader:{
        conditionId:0,
      },
      saveRules:rules,
      saveItemValueRules:itemValueRules,
      rulesLabel:rulesLabel,
      itemValueRulesLabel:itemValueRulesLabel,
      saveItemValueFlag:false,
      itemValueModal:{
        valueNo:undefined,
        itemValue: undefined,
      },
      itemDefs:[],
      itemDefModalVisible:false,
      detailRules:detailRules,
      detailRulesLabel:detailRulesLabel,
      conditionDetailModal:{
        SQLStatementExecuteItem:undefined,
        SQLStatementExecuteValue:undefined,
        SQLStatementExecuteCalculate:undefined,
        SQLStatementExecuteConditionId:undefined,
        SQLStatementExecuteValueItemNo:undefined,
        SQLStatementExecuteFlag:'N',
      },
      saveItemValueList:[],
      saveItemValueListDialog:false,
      itemValueListSelected:[],
      itemValueAllList:[],
      queryCodeItemValueDialog:false,
      queryCodeItemValueList:[],
    }
  },
  watch:{
    conditionHeaderIndex(newVal,oldVal){
      this.searchCodeItemValueListItem();
      this.codeConditionDetailList();
    }
  },
  methods: {
    removeCodeItemValue(row){
      this.$confirm(`确定要删除值"${row.itemValue}"吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeCodeItemValue(row).then(({data})=>{
          if (data && data.code === 0){
            this.$message.success(data.msg)
            this.searchCodeItemValueListItem()
          }else {
            this.$message.warning(data.msg)
          }
        }).catch((error)=>{
          this.$message.error(error)
        })
      }).catch(() => {})
    },
    getItemValueList(){
      searchCodeItemValueList(this.itemValue).then(({data})=>{
        if (data && data.code === 0){
          this.itemValueList = data.rows1
          this.conditionHeaders = data.rows2
          this.conditionDetails = data.rows3
        }else {
          this.$message.warning(data.msg)
        }
      }).catch((error)=>{
        this.$message.error(error)
      })
    },
    searchConditionHeader(flag){
      searchCodeConditionHeaderList(this.itemValue).then(({data})=>{
        if (data && data.code === 0){
          this.conditionHeaders = data.rows;
          if (flag){
            this.conditionHeaderIndex = this.conditionHeaders.length - 1;
          }
        }else {
          this.$message.warning(data.msg)
        }
      }).catch((error)=>{
        this.$message.error(error)
      })
    },
    clickSaveConditionHeaderBtn(){
      this.conditionHeader = {
        conditionId:this.conditionHeaders[this.conditionHeaders.length - 1].conditionId + 1,
        itemNo:this.itemValue.itemNo,
        site:this.$store.state.user.site,
        active:'Y',
        conditionName:'',
      }
      this.saveConditionHeaderFlag = true
    },
    saveConditionHeaderBtn(){
      this.$refs.saveForm.validate((valid,obj) => {
        if (valid){
          if (this.saveFlag === "新增"){
            this.saveCodeConditionHeader()
          }else {
            this.editCodeConditionHeader()
          }
        }else {
          Object.keys(obj).forEach(key => {
            this.$message.error(obj[key][0].message);
            return
          })
        }
      })
    },
    saveCodeConditionHeader(){
      saveCodeConditionHeader(this.conditionHeader).then(({data})=>{
        if (data && data.code === 0){
          this.$message.success(data.msg)
          this.saveConditionHeaderFlag = false
          this.searchConditionHeader(true)
        }else {
          this.$message.warning(data.msg)
        }
      }).catch((error)=>{
        this.$message.error(error)
      })
    },
    editConditionHeaderBtn(){
      this.conditionHeader = {...this.conditionHeaders[this.conditionHeaderIndex]}
      this.saveFlag = "编辑"
      this.saveConditionHeaderFlag = true
    },
    editCodeConditionHeader(){
      editCodeConditionHeader(this.conditionHeader).then(({data})=>{
        if (data && data.code === 0){
          this.$message.success(data.msg)
          this.saveConditionHeaderFlag = false
          this.searchConditionHeader()
        }else {
          this.$message.warning(data.msg)
        }
      }).catch((error)=>{
        this.$message.error(error)
      })
    },
    closeSaveConditionHeader(){
      this.$refs.saveForm.resetFields();
      this.saveFlag = "新增";
    },
    removeConditionHeaderBtn(){
      this.$confirm(`确定要删除条件"${this.conditionHeaders[this.conditionHeaderIndex].conditionDesc}"吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeCodeConditionHeader(this.conditionHeaders[this.conditionHeaderIndex]).then(({data})=>{
          if (data && data.code === 0){
            this.$message.success(data.msg);
            this.conditionHeaderIndex = 0;
            this.searchConditionHeader();
          }else {
            this.$message.warning(data.msg)
          }
        })
      }).catch(() => {})
    },
    saveItemValueBtn(){
      this.itemValueModal = {
        valueNo:undefined,
        itemValue: undefined,
        site:this.itemValue.site,
        itemNo:this.itemValue.itemNo,
        conditionId:this.conditionHeaders[this.conditionHeaderIndex].conditionId,
      }
      this.saveItemValueFlag = true;
    },
    closeSaveItemValue(){
      this.$refs.saveItemValueForm.resetFields();
      this.saveFlag = "新增";
    },
    saveItemValue(){
      this.$refs.saveItemValueForm.validate((valid,obj) => {
        if (valid){
          if (this.itemValueModal.valueNo && this.itemValueModal.valueNo.length > this.itemValue.bits){
            this.$message.error(`该"简码"位数超出了元素设置最大值${this.itemValue.bits}!`);
            return;
          }
          if (this.itemValueList.some(item=>item.valueNo === this.itemValueModal.valueNo) && this.saveFlag === "新增"){
            this.$confirm(`该"简码"${this.itemValueModal.valueNo}已存在, 继续保存?`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.saveCodeItemValueData();
            }).catch(() => {

            });
          }else {
            this.saveCodeItemValueData();
          }
        }else {
          Object.keys(obj).forEach(key => {
            this.$message.error(obj[key][0].message);
            return
          })
        }
      })
    },
    saveCodeItemValueData(){
      if (this.saveFlag === "新增"){
        saveCodeItemValue(this.itemValueModal).then(({data})=>{
          if (data && data.code === 0){
            // this.saveItemValueFlag = false
            this.$message.success(data.msg);
            this.$refs.saveItemValueForm.resetFields();
            this.searchCodeItemValueListItem()
          }else {
            this.$message.warning(data.msg)
          }
        }).catch((error)=>{
          this.$message.error(error)
        })
      }else {
        updateCodeItemValue(this.itemValueModal).then(({data})=>{
          if (data && data.code === 0){
            this.saveItemValueFlag = false
            this.$message.success(data.msg)
            this.searchCodeItemValueListItem()
          }else {
            this.$message.warning(data.msg)
          }
        }).catch((error)=>{
          this.$message.error(error)
        })
      }
    },
    searchCodeItemValueListItem(){
      let params = {
        itemNo: this.itemValue.itemNo,
        site:this.itemValue.site,
        conditionId:this.conditionHeaders[this.conditionHeaderIndex].conditionId,
      }
      searchCodeItemValueListItem(params).then(({data})=>{
        if (data && data.code === 0){
          this.itemValueList = data.rows
        }else {
          this.$message.warning(data.msg)
        }
      }).catch((error)=>{
        this.$message.error(error)
      })
    },
    clickSaveItemValueBtn(row){
      this.itemValueModal = {...row}
      this.saveFlag = "编辑"
      this.saveItemValueFlag = true;
    },
    /**
     * 获取当前itemDef次序前的itemDef列表
     */
    searchCodeItemDefs(){
      let params = {
        site:this.itemValue.site,
        itemNo:this.itemValue.itemNo,
        seqNo:this.itemValue.seqNo,
      }
      searchCodeItemDefsSeq(params).then(({data})=>{
        if (data && data.code === 0){
          this.itemDefs = data.rows;
          if (this.itemDefs.length > 0 && this.conditionDetailModal.seqNo === undefined){
            this.conditionDetailModal.SQLStatementExecuteItem = this.itemDefs[0].itemNo;
          }
          let params = {
            itemNo: this.conditionDetailModal.SQLStatementExecuteItem,
            site:this.itemValue.site,
          }
          this.saveCodeItemValue(params);
        }else {
          this.$message.warning(data.msg)
        }
      }).catch((error)=>{
        this.$message.error(error)
      })
    },
    saveCodeItemValue(itemDef){
      let params = {
        itemNo: itemDef.itemNo,
        site:itemDef.site,
      }
      searchCodeItemValueListItem(params).then(({data})=>{
        if (data && data.code === 0){
          this.saveItemValueList = data.rows;
          this.$nextTick(()=>{
            if (this.saveItemValueList.length > 0 && this.conditionDetailModal.seqNo === undefined){
              this.conditionDetailModal.SQLStatementExecuteValueItemNo = this.saveItemValueList[0].valueItemNo;
            }
          })
        }else {
          this.$message.warning(data.msg)
        }
      }).catch((error)=>{
        this.$message.error(error)
      })
    },
    clickConditionDetailBtn(){
      this.conditionDetailModal.site = this.itemValue.site;
      this.conditionDetailModal.itemNo = this.itemValue.itemNo;
      this.conditionDetailModal.conditionId = this.conditionHeaders[this.conditionHeaderIndex].conditionId;
      this.searchCodeItemDefs();
      this.itemDefModalVisible = true;
    },
    closeConditionDetail(){
      Object.keys(this.conditionDetailModal).forEach(key => {
        this.conditionDetailModal[key] = undefined;
      });
      this.conditionDetailModal.seqNo = undefined;
      this.conditionDetailModal.SQLStatementExecuteFlag = 'N';
    },
    changeItemDef(val){
      let params = {
        itemNo: val,
        site:this.itemValue.site,
      }
      this.conditionDetailModal.SQLStatementExecuteValueItemNo = undefined;
      this.saveCodeItemValue(params);
    },
    saveConditionDetail(){
      this.$refs.formConditionDetail.validate((valid,obj) => {
        if (valid){
          if (this.conditionDetailModal.seqNo){
            this.handleUpdateConditionDetail();
          }else {
            this.handleSaveConditionDetail();
          }
        }else {
          Object.keys(obj).forEach(key => {
            this.$message.error(obj[key][0].message);
            return
          })
        }
      })
    },
    handleSaveConditionDetail(){
      saveConditionDetailList(this.conditionDetailModal).then(({data})=>{
        if (data && data.code === 0){
          this.$message.success(data.msg)
          this.codeConditionDetailList();
        }else {
          this.$message.warning(data.msg)
        }
      }).catch((error)=>{
        this.$message.error(error)
      })
    },
    handleUpdateConditionDetail(){
      editConditionDetailList(this.conditionDetailModal).then(({data})=>{
        if (data && data.code === 0){
          this.$message.success(data.msg)
          this.codeConditionDetailList();
          this.itemDefModalVisible = false;
        }else {
          this.$message.warning(data.msg)
        }
      }).catch((error)=>{
        this.$message.error(error)
      })
    },
    codeConditionDetailList(){
      let params = {
        itemNo: this.itemValue.itemNo,
        site:this.itemValue.site,
        conditionId:this.conditionHeaders[this.conditionHeaderIndex].conditionId,
      }
      codeConditionDetailList(params).then(({data})=>{
        if (data && data.code === 0){
          this.conditionDetails = data.rows
        }else {
          this.$message.warning(data.msg)
        }
      }).catch((error)=>{
        this.$message.error(error)
      })
    },
    handleEditConditionDetail(){
      this.conditionDetailModal = {...this.conditionDetails[this.selectionDetailIndex]}
      this.conditionDetailModal.SQLStatementExecuteItem = parseInt(this.conditionDetailModal.SQLStatementExecuteItem)
      this.searchCodeItemDefs();
      this.itemDefModalVisible = true
    },
    removeConditionDetailList(){
      this.$confirm(`确定要删除条件"${this.conditionDetails[this.selectionDetailIndex].SQLStatementExecuteCalculate === 1 ? '并且' : '或者' }(${this.conditionDetails[this.selectionDetailIndex].itemDesc}=${this.conditionDetails[this.selectionDetailIndex].itemValue})"吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.conditionDetails.length === 0 && this.itemValueList.length !== 0){
          this.$alert(`"${this.conditionDetails[this.selectionDetailIndex].SQLStatementExecuteCalculate === 1 ? '并且' : '或者' }(${this.conditionDetails[this.selectionDetailIndex].itemDesc}=${this.conditionDetails[this.selectionDetailIndex].itemValue})"为当前条件的最后一条判断语句而且该条件下已经维护了可选值，请先删除可选值!`, '提示', {
            confirmButtonText: '确定',
          });
          return
        }
        removeConditionDetailList(this.conditionDetails[this.selectionDetailIndex]).then(({data})=>{
          if (data && data.code === 0){
            this.$message.success(data.msg)
            this.codeConditionDetailList()
            this.selectionDetailIndex = -1
          }else {
            this.$message.warning(data.msg)
          }
        }).catch((error)=>{
          this.$message.error(error)
        })
      }).catch(() => {})
    },
    saveItemValueListBtn(){
      this.itemValueListSelected = this.itemValueList.map(item=>item.valueItemNo);
      let params = {
        site:this.itemValue.site,
        itemNo:this.itemValue.itemNo,
      }
      searchCodeItemValueListItem(params).then(({data})=>{
        if (data && data.code === 0){
          this.itemValueAllList = data.rows;
        }else {
          this.$message.warning(data.msg)
        }
      }).catch((error)=>{
        this.$message.error(error)
      })
      this.saveItemValueListDialog = true;
    },
    handleSelectChange(row,position,key){
      let rows = key.map(item=>{
        return {
          site:this.itemValue.site,
          itemNo:this.itemValue.itemNo,
          valueItemNo:item,
          conditionId:this.conditionHeaders[this.conditionHeaderIndex].conditionId,
        }
      })
      if (position === 'left'){
        // 删除
        this.removeCodeItemValueBatch(rows)
      }else {
        // 新增
        this.saveCodeItemValueBatch(rows)
      }
    },
    removeCodeItemValueBatch(rows){
      removeCodeItemValueBatch(rows).then(({data})=>{
        if (data && data.code === 0){
          this.$message.success(data.msg)
          this.searchCodeItemValueListItem()
        }else {
          this.$message.warning(data.msg)
        }
      }).catch((error)=> {
        this.$message.error(error)
      })
    },
    saveCodeItemValueBatch(rows){
      saveCodeItemValueBatch(rows).then(({data})=>{
        if (data && data.code === 0){
          this.$message.success(data.msg)
          this.searchCodeItemValueListItem()
        }else {
          this.$message.warning(data.msg)
        }
      }).catch((error)=> {
        this.$message.error(error)
      })
    },
    handleQueryCodeItemValue(row){
      let params = {
        ...row
      }
      queryCodeItemValueDetail(params).then(({data})=>{
        if (data && data.code === 0){
          this.queryCodeItemValueDialog = true;
          this.queryCodeItemValueList = data.rows;
        }else {
          this.$message.warning(data.msg)
        }
      }).catch((error)=>{
        this.$message.error(error)
      })
    }
  },
  created() {
    this.getItemValueList()
  }
}
</script>

<template>
  <div>
    <div>
      <div>可选值列举的条件:</div>
      <div style="border: 1px solid #ebeef5;padding: 5px 10px;box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1)">
          <el-button type="primary" icon="el-icon-plus" @click="clickSaveConditionHeaderBtn" :disabled="itemValue.itemByCondition === 'N'">新增</el-button>
          <el-button type="primary" icon="el-icon-edit" @click="editConditionHeaderBtn" >编辑</el-button>
          <el-button type="primary" icon="el-icon-delete" @click="removeConditionHeaderBtn" :disabled="itemValue.itemByCondition === 'N'">删除</el-button>
          <el-button type="primary" icon="el-icon-d-arrow-left" :disabled="itemValue.itemByCondition === 'N'" @click="conditionHeaderIndex = 0">首条</el-button>
          <el-button type="primary" icon="el-icon-arrow-left" :disabled="itemValue.itemByCondition === 'N' || conditionHeaderIndex === 0" @click="conditionHeaderIndex--">前条</el-button>
          <el-button type="primary" :disabled="itemValue.itemByCondition === 'N' || conditionHeaderIndex === conditionHeaders.length - 1" @click="conditionHeaderIndex++">后条<i class="el-icon-arrow-right el-icon--right"></i></el-button>
          <el-button type="primary" :disabled="itemValue.itemByCondition === 'N'" @click="conditionHeaderIndex = conditionHeaders.length - 1">末条<i class="el-icon-d-arrow-right el-icon--right"></i></el-button>
          <el-button type="primary" icon="el-icon-close" plain @click="$emit('close')">关闭</el-button>
          <el-button type="primary" icon="el-icon-refresh" plain @click="searchConditionHeader">刷新</el-button>
      </div>
      <div style="display: flex;margin-top: 2px;gap: 2px">
        <el-card class="box-card" style="width: 84%;">
          <div slot="header" class="clearfix" style="padding: 10px 0">
            <el-form v-if="conditionHeaders.length > 0"  label-position="left" :model="conditionHeaders[conditionHeaderIndex]">
              <el-row :gutter="10">
                <el-col :span="6">
                  <el-form-item label="序号:">
                    <el-input-number disabled v-model="conditionHeaders[conditionHeaderIndex].conditionId" style="min-width: 50px;max-width: 60px" :min="1" :controls="false"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="14">
                  <el-form-item label="条件描述:" label-width="70px">
                    <el-input readonly v-model="conditionHeaders[conditionHeaderIndex].conditionDesc"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="6">
                  <el-form-item label="有效:">
                    <el-checkbox disabled v-model="conditionHeaders[conditionHeaderIndex].active" true-label="Y" false-label="N"></el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :span="14">
                  <el-form-item label="条件名称:" label-width="70px">
                    <el-input readonly v-model="conditionHeaders[conditionHeaderIndex].conditionName"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div style="height: 200px;overflow-y: auto;">
            <div v-for="(o, index) in conditionDetails" :key="o.seqNo" @click="selectionDetailIndex = index" :style="{backgroundColor: selectionDetailIndex === index? '#E8F7F6' : '#FFF'}"
                 style="padding: 5px 0;cursor:pointer;border-bottom: 1px solid #ebeef5;color: #606266;font-size: 12px;line-height: 14px;">
<!--              {{`${o.SQLStatementExecuteCalculate === '1' ? '并且' : '或者' }(${o.itemDesc}=${o.itemValue})`}}-->
              <span v-if="o.SQLStatementExecuteCalculate === '1'">并且 {{`(${o.itemDesc}=${o.itemValue})`}}</span>
              <span v-else-if="o.SQLStatementExecuteCalculate === '0'">或者 {{`(${o.itemDesc}=${o.itemValue})`}}</span>
              <span v-else-if="o.SQLStatementExecuteCalculate === '2'">并且 .. { {{`(${o.itemDesc}=${o.itemValue})`}}</span>
              <span v-if="o.SQLStatementExecuteFlag === 'Y'">.. }</span>
            </div>
          </div>
        </el-card>
        <div style="border: 1px solid #ebeef5;padding: 10px 20px;box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);width: 20%;display: flex;flex-direction: column;align-items: center;justify-content: flex-start">
          <div style="text-align: center">
            <el-button type="primary" icon="el-icon-plus" @click="clickConditionDetailBtn" :disabled="itemValue.itemByCondition === 'N'">新增</el-button>
          </div>
          <div style="text-align: center">
            <el-button type="primary" icon="el-icon-edit" @click="handleEditConditionDetail" :disabled="itemValue.itemByCondition === 'N' || selectionDetailIndex === -1">编辑</el-button>
          </div>
          <div style="text-align: center">
            <el-button type="primary" icon="el-icon-delete" @click="removeConditionDetailList" :disabled="itemValue.itemByCondition === 'N' || selectionDetailIndex === -1">删除</el-button>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-top: 10px;border-top: 1px solid #ebeef5;">
      <div>可选值列表:</div>
      <div>
        <el-button type="primary" @click="saveItemValueBtn">新增</el-button>
        <el-button type="primary" @click="saveItemValueListBtn">快捷输入</el-button>
      </div>
      <el-table :data="itemValueList" height="300" border style="width: 100%">
        <el-table-column prop="valueNo" header-align="center" align="left" min-width="120" width="140" label="简码"></el-table-column>
        <el-table-column prop="itemValue" header-align="center" align="left" label="值"></el-table-column>
        <el-table-column label="操作" header-align="center" align="center" width="160">
          <template slot-scope="{row,$index}">
            <el-link style="cursor:pointer;" @click="clickSaveItemValueBtn(row)">编辑</el-link>
            <el-link style="cursor:pointer;" @click="removeCodeItemValue(row)">删除</el-link>
            <el-link style="cursor:pointer;" @click="handleQueryCodeItemValue(row)">被引用的条件</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="`条件${saveFlag}`" :close-on-click-modal="false" v-drag :visible.sync="saveConditionHeaderFlag" @close="closeSaveConditionHeader" width="400px" append-to-body>
      <el-form ref="saveForm" label-position="top" :model="conditionHeader" :rules="saveRules" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="4">
            <el-form-item label="序号:" prop="conditionId">
              <el-input-number :controls="false" disabled v-model="conditionHeader.conditionId"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="条件描述:" prop="conditionDesc" :show-message="false">
              <el-input :disabled="itemValue.itemByCondition === 'N'" v-model="conditionHeader.conditionDesc"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="4">
<!--            <el-form-item label="有效:" prop="active">-->
            <el-form-item label=" ">
              <el-checkbox :disabled="itemValue.itemByCondition === 'N'" v-model="conditionHeader.active" true-label="Y" false-label="N">有效</el-checkbox>
<!--              <el-select v-model="conditionHeader.active" placeholder="请选择" :show-message="false">-->
<!--                <el-option label="Y" value="Y"></el-option>-->
<!--                <el-option label="N" value="N"></el-option>-->
<!--              </el-select>-->
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="条件名称:" prop="conditionName" :show-message="false">
              <el-input v-model="conditionHeader.conditionName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-footer style="height:30px;text-align:center;margin-top: 8px">
        <el-button type="primary" @click="saveConditionHeaderBtn">保存</el-button>
        <el-button type="primary" @click="saveConditionHeaderFlag = false">关闭</el-button>
      </el-footer>
    </el-dialog>

    <!--可选值-->
    <el-dialog :title="`可选值${saveFlag}`" :close-on-click-modal="false" v-drag :visible.sync="saveItemValueFlag" @close="closeSaveItemValue" width="400px" append-to-body>
      <el-form ref="saveItemValueForm" label-position="top" :model="itemValueModal" :rules="saveItemValueRules" label-width="80px">
        <el-form-item label="简码:" prop="valueNo" :show-message="false">
          <el-input v-model="itemValueModal.valueNo" style="width: 40%"></el-input>
        </el-form-item>
        <el-form-item label="值:" prop="itemValue" :show-message="false">
          <el-input v-model="itemValueModal.itemValue" style="width: 100%"></el-input>
        </el-form-item>
      </el-form>
      <el-footer style="height:30px;text-align:center;margin-top: 8px">
        <el-button type="primary" @click="saveItemValue">{{saveFlag==='新增'?'应用':'保存'}}</el-button>
        <el-button type="primary" @click="saveItemValueFlag = false">关闭</el-button>
      </el-footer>
    </el-dialog>

    <el-dialog title="条件定义" v-drag :close-on-click-modal="false" :visible.sync="itemDefModalVisible" @close="closeConditionDetail" width="400px" append-to-body>
      <el-form ref="formConditionDetail" label-position="top" :rules="detailRules" :model="conditionDetailModal" >
        <el-row :gutter="10">
          <el-col :span="10">
            <el-form-item label="运算符号:" prop="SQLStatementExecuteCalculate" :show-message="false">
              <el-select v-model="conditionDetailModal.SQLStatementExecuteCalculate" style="width: 100%" placeholder="请选择" >
                <el-option label="并且" value="1"></el-option>
                <el-option label="并且..{" value="2"></el-option>
                <el-option label="或者" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="元素名称:" prop="SQLStatementExecuteItem" :show-message="false">
              <el-select v-model="conditionDetailModal.SQLStatementExecuteItem" style="width: 100%" @change="changeItemDef">
                <el-option v-for="(o, index) in itemDefs" :key="o.itemNo" :label="`(${o.itemNo})${o.itemDesc}`" :value="o.itemNo"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="元素可选值:" prop="SQLStatementExecuteValueItemNo" :show-message="false">
              <el-select filterable v-model="conditionDetailModal.SQLStatementExecuteValueItemNo" style="width: 100%">
                <div v-for="(o, index) in saveItemValueList" :key="index">
                  <el-option :label="`(${o.valueNo})${o.itemValue}`" :value="o.valueItemNo">
                    <span style="float: left">{{ `(${o.valueNo})${o.itemValue}` }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{o.conditionName}}</span>
                  </el-option>
                </div>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="" prop="SQLStatementExecuteValueFlag" :show-message="false">
          <el-checkbox v-model="conditionDetailModal.SQLStatementExecuteFlag" true-label="Y" false-label="N">添加括号</el-checkbox>
        </el-form-item>
      </el-form>
      <el-footer style="height:30px;text-align:center;margin-top: 8px">
        <el-button type="primary" v-if="!conditionDetailModal.seqNo" @click="saveConditionDetail">应用</el-button>
        <el-button type="primary" v-else @click="handleUpdateConditionDetail">确定</el-button>
        <el-button type="primary" @click="itemDefModalVisible = false">关闭</el-button>
      </el-footer>
    </el-dialog>

    <el-dialog title="元素可选值快速输入" v-drag :close-on-click-modal="false" :visible.sync="saveItemValueListDialog" append-to-body width="520px">
      <el-form label-position="top" style="margin-bottom: 10px">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="元素">
              <el-input v-model="itemValue.itemDesc" readonly ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="条件描述">
              <el-input v-if="conditionHeaders.length > 0" v-model="conditionHeaders[conditionHeaderIndex].conditionDesc" readonly ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!--表格形式-->
      <el-transfer class="rq" :props="{key: 'valueItemNo',label: 'itemValue' }"
                   filterable v-model="itemValueListSelected" @change="handleSelectChange"
                   :data="itemValueAllList" :titles="['全部值', '已选值']">
        <span slot-scope="{option}">{{option.valueNo}} - {{option.itemValue}}</span>
      </el-transfer>
      <el-footer style="height:40px;margin-top: 10px;text-align:center">
        <el-button type="primary" @click="saveItemValueListDialog = false">关闭</el-button>
      </el-footer>
    </el-dialog>

    <el-dialog title="被引用的条件" v-drag :close-on-click-modal="false" top="20vh" :visible.sync="queryCodeItemValueDialog" append-to-body width="520px">
      <el-table :data="queryCodeItemValueList" height="300px" border>
        <el-table-column prop="itemNo" label="元素序号"></el-table-column>
        <el-table-column prop="itemDesc" label="元素描述"></el-table-column>
        <el-table-column prop="conditionId" label="条件序号"></el-table-column>
        <el-table-column prop="conditionDesc" label="条件描述"></el-table-column>
      </el-table>
      <el-footer style="height:30px;margin-top: 10px;text-align:center">
        <el-button type="primary" @click="queryCodeItemValueDialog = false">关闭</el-button>
      </el-footer>
    </el-dialog>
  </div>
</template>

<style scoped>
.el-card /deep/ .el-card__header{
  padding: 0px 20px;
}
.el-form-item /deep/ .el-form-item__content{
  line-height: 30px ;
}

.rq /deep/ .el-transfer-panel .el-transfer-panel__header {
  height: 35px;
  line-height: 35px;
}

.rq /deep/ .el-transfer-panel .el-transfer-panel__header .el-checkbox {
  line-height: 35px;
}

.rq /deep/ .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
  color: #fff
}

.rq /deep/ .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label span {
  color: #3c3c3e;
}

.rq /deep/ .el-transfer-panel .el-checkbox__inner::after {
  height: 8px;
  width: 4px;
}
</style>