epmet-oper-gov/src/views/components/smartSearchRule.vue

<template>
  <div>

    <div class="m-main">
      <div v-for="(ruleItem,ruleIndex) in smartRuleList"
           :key="ruleIndex"
           class="row-item">
        <el-select class="item_width_1"
                   v-model="ruleItem.selSmartType"
                   size="small"
                   placeholder="请选择">
          <el-option v-for="item in smartList1"
                     @click.native="handleSelSmartType(ruleIndex,item)"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>

        <div v-if="ruleItem.selSmartType==='house'">
          <div v-for="(houseItem,houseIndex) in ruleItem.houseRuleList"
               :key="houseIndex"
               class="row-item-one">

            <el-select class="item_width_1"
                       v-model="houseItem.colKey"
                       size="small"
                       placeholder="请选择">
              <el-option v-for="item in houseItemList"
                         @click.native="handleSelHouseItem(houseIndex,item)"
                         :key="item.colKey"
                         :label="item.label"
                         :value="item.colKey">
              </el-option>
            </el-select>
            <el-select class="item_width_1"
                       v-model="houseItem.queryType"
                       size="small"
                       placeholder="请选择">
              <el-option v-for="item in queryList"
                         @click.native="handleSelHouseQuery(houseIndex,item)"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
            <div v-if="houseItem.queryType!=='is_null'&&houseItem.queryType!=='is_not_null'">

              <el-select v-if="houseItem.colType==='select'||houseItem.colType==='radio'||houseItem.colType==='checkbox'"
                         class="item_width_2"
                         v-model="houseItem.colVal"
                         size="small"
                         placeholder="请选择">
                <el-option v-for="item in houseItem.colOption"
                           @click.native="handleSelHouseValue(houseIndex,item)"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
              <el-input-number v-else-if="houseItem.colType==='inputNum'"
                               class="item_width_2"
                               v-model="houseItem.colVal"
                               :min="0"
                               size="small"
                               label="请输入"></el-input-number>
              <el-date-picker v-else-if="houseItem.colType==='datepicker'||houseItem.colType==='date'"
                              v-model="houseItem.colVal"
                              class="item_width_2"
                              type="datetime"
                              size="small"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              value="yyyy-MM-dd HH:mm:ss"
                              placeholder="开始时间">
              </el-date-picker>
              <el-input v-else
                        class="item_width_2"
                        size="small"
                        placeholder="请输入"
                        v-model="houseItem.colVal">
              </el-input>
            </div>

            <el-select v-if="houseIndex<(houseRuleList.length-1)"
                       class="item_width_1"
                       v-model="houseItem.nextLogicalRel"
                       size="small"
                       placeholder="请选择">
              <el-option v-for="item in logicalList"
                         @click.native="handleSelHouseLogical(houseIndex,item)"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>

          </div>

        </div>

        <div v-if="ruleItem.selSmartType==='person'">
          <div v-for="(personItem,personIndex) in resiRuleList"
               :key="personIndex"
               class="row-item-one">

            <el-select class="item_width_1"
                       v-model="personItem.itemGroupId"
                       size="small"
                       placeholder="请选择">
              <el-option v-for="item in groupList"
                         @click.native="handleSelGroup(personIndex,item)"
                         :key="item.id"
                         :label="item.label"
                         :value="item.id">
              </el-option>
            </el-select>
            <el-select class="item_width_1"
                       v-model="personItem.itemId"
                       size="small"
                       placeholder="请选择">
              <el-option v-for="item in personItem.itemList"
                         @click.native="handleSelGroupItem(personIndex,item)"
                         :key="item.itemId"
                         :label="item.label"
                         :value="item.itemId">
              </el-option>
            </el-select>
            <el-select class="item_width_1"
                       v-model="personItem.queryType"
                       size="small"
                       placeholder="请选择">
              <el-option v-for="item in queryList"
                         @click.native="handleSelPersonQuery(personIndex,item)"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
            <div v-if="personItem.queryType!=='is_null'&&personItem.queryType!=='is_not_null'">

              <el-select v-if="personItem.colType==='select'||personItem.colType==='radio'||personItem.colType==='checkbox'"
                         class="item_width_2"
                         v-model="personItem.colVal"
                         size="small"
                         placeholder="请选择">
                <el-option v-for="item in personItem.colOption"
                           @click.native="handleSelPersonValue(personIndex,item)"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
              <el-input-number v-else-if="personItem.colType==='inputNum'"
                               class="item_width_2"
                               v-model="personItem.colVal"
                               :min="0"
                               size="small"
                               label="请输入"></el-input-number>

              <el-date-picker v-else-if="personItem.colType==='datepicker'||personItem.colType==='date'"
                              v-model="personItem.colVal"
                              class="item_width_2"
                              type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              value="yyyy-MM-dd HH:mm:ss"
                              placeholder="开始时间">
              </el-date-picker>
              <el-input v-else
                        class="item_width_2"
                        size="small"
                        placeholder="请输入"
                        v-model="personItem.colVal">
              </el-input>

            </div>

            <el-select v-if="personIndex<(resiRuleList.length-1)"
                       class="item_width_1"
                       v-model="personItem.nextLogicalRel"
                       size="small"
                       placeholder="请选择">
              <el-option v-for="item in logicalList"
                         @click.native="handleSelPersonLogical(personIndex,item)"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>

          </div>

        </div>

        <img v-if=" ruleIndex<smartRuleList.length-1"
             class="img_del"
             src="@/assets/img/icon-del.png"
             @click="delHouse(ruleIndex)">
        <img v-if=" ruleIndex==smartRuleList.length-1"
             class="img_del"
             src="@/assets/img/icon-add.png"
             @click="addHouse(ruleIndex)">

      </div>

    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from '@/js/dai/request'


let loading // 加载动画
export default {
  data () {
    return {

      personChecked: false,
      houseChecked: false,

      houseSel: true,
      personSel: false,


      smartList1: [
        {
          value: 'house',
          label: '房屋信息'
        },
        {
          value: 'person',
          label: '居民信息'
        }
      ],
      groupList: [],
      queryList: [],
      logicalList: [
        {
          label: '并且',
          value: 'and'
        },
        {
          label: '或者',
          value: 'or'
        }
      ],
      houseItemList: [],//房屋信息第二列

      resiRuleList: [
        {
          ruleDesc: '',//规则描述文字，例如：基础信息性别等于女	
          nextLogicalRel: '',//与上一条的关系；and、or	
          itemGroupId: '',
          itemId: '',
          queryType: '',
          colTable: '',
          colKey: '',
          colVal: '',

          itemList: [],
          colType: '',//详细参数的组件类型
          colOption: [],
          itemGroupName: '',
          itemLabel: '',
          queryTypeName: '',
          colValLabel: '',
          nextLogicalRelName: '',
        }
      ],

      houseRuleList: [
        {
          ruleDesc: '',
          nextLogicalRel: '',//与上一条的关系；and、or	
          queryType: '',
          colTable: '',
          colKey: '',
          colVal: '',

          titleName: '房屋信息',
          colType: '',//详细参数的组件类型
          colOption: [],
          itemGroupName: '房屋信息',
          itemLabel: '',
          queryTypeName: '',
          colValLabel: '',
          nextLogicalRelName: '',
        }
      ],

      okflag: false,

      showPersonList: false,
      ruleList: {},

      smartRuleList: [
        {
          selSmartType: 'house',
        },


      ],

    }
  },

  watch: {

  },
  components: {
    // personListItem
  },
  async created () {
    // this.startLoading()
    await this.loadPersonGroup()
    await this.loadHouseItem()
    await this.loadDicOption()

  },


  methods: {
    handleSelSmartType (ruleIndex, item) {
      let oneData = this.smartRuleList[ruleIndex]
      // oneData.



      if (value === 'house') {
        let obj = {
          ruleDesc: '',
          nextLogicalRel: '',//与上一条的关系；and、or	
          queryType: '',
          colTable: '',
          colKey: '',
          colVal: '',

          titleName: '房屋信息',
          colType: '',//详细参数的组件类型
          colOption: [],
          itemGroupName: '房屋信息',
          itemLabel: '',
          queryTypeName: '',
          colValLabel: '',
          nextLogicalRelName: '',
        }
      } else {

      }

      this.$set(this.houseRuleList, houseIndex, oneData)
    },
    async setRule (resiRuleList, houseRuleList) {
      // this.startLoading()
      if (this.groupList.length == 0 || this.houseItemList.length === 0) {
        setTimeout(() => {
          this.setRule(resiRuleList, houseRuleList);
        }, 500);
        return false
      }


      this.resiRuleList = resiRuleList
      if (this.resiRuleList && this.resiRuleList.length > 0) {
        this.personChecked = true
        for (let i = 0; i < this.resiRuleList.length; i++) {
          let element = this.resiRuleList[i]

          let selGroup = this.groupList.filter((item) =>
            element.itemGroupId === item.id
          );
          console.log(selGroup)

          if (selGroup.length > 0) {
            await this.handleSelGroup(i, selGroup[0], true)


            let selItem = element.itemList.filter((item) =>
              element.itemId === item.itemId);
            if (selItem.length > 0) {
              await this.handleSelGroupItem(i, selItem[0], true)
            }

          }
        }
      }

      this.houseRuleList = houseRuleList
      if (this.houseRuleList && this.houseRuleList.length > 0) {
        this.houseChecked = true
        this.houseRuleList.forEach((element, index) => {

          let selHouseItem = this.houseItemList.filter((item) =>
            element.colKey === item.colKey
          );

          if (selHouseItem.length > 0) {
            this.handleSelHouseItem(index, selHouseItem[0], true)
          }

        });
      }

    },

    getRule () {
      this.okflag = false

      let messageObj = this.validateRule(this.personChecked, this.houseChecked)

      // console.log('resiRuleList', this.resiRuleList)
      // console.log('houseRuleList', this.houseRuleList)

      if (messageObj) {
        this.$message.error(messageObj)

      } else {

        if (this.resiRuleList.length > 0) {
          this.resiRuleList[this.resiRuleList.length - 1].nextLogicalRel = ''
        }

        if (this.houseRuleList.length > 0) {
          this.houseRuleList[this.houseRuleList.length - 1].nextLogicalRel = ''
        }



        this.okflag = true
      }

    },

    validateRule (valPerson, valHouse) {

      let message = ''
      if (valPerson) {

        this.resiRuleList.forEach((item, index) => {

          if (item.itemGroupId === '' ||
            item.itemId === '' ||
            item.queryType === '' ||
            item.colKey === ''
          ) {
            message = '匹配规则' + (this.index + 1) + '人员信息不完整，请填写完整！'
            return message
          }
          if ((index != this.resiRuleList.length - 1) && item.nextLogicalRel === '') {
            message = '匹配规则' + (this.index + 1) + '人员信息不完整，请填写完整！'
            return message
          }

          if ((item.queryType !== 'is_null' && item.queryType !== 'is_not_null') && item.colVal === '') {
            message = '匹配规则' + (this.index + 1) + '人员信息不完整，请填写完整！'
            return message
          }

        });


      }

      if (valHouse) {

        this.houseRuleList.forEach((item, index) => {

          if (item.itemGroupId === '' ||
            item.itemId === '' ||
            item.queryType === '' ||
            item.colKey === ''
          ) {
            message = '匹配规则' + (this.index + 1) + '房屋信息不完整，请填写完整！'
            return message
          }
          if ((index != this.houseRuleList.length - 1) && item.nextLogicalRel === '') {
            message = '匹配规则' + (this.index + 1) + '房屋信息不完整，请填写完整！'
            return message
          }

          if ((item.queryType !== 'is_null' && item.queryType !== 'is_not_null') && item.colVal === '') {
            message = '匹配规则' + (this.index + 1) + '房屋信息不完整，请填写完整！'
            return message
          }


        });
      }




      return message
    },

    handlePreview () {
      if (!this.personChecked && !this.houseChecked) {
        this.$message.info('请勾选要预览的规则')
        return false
      }

      this.getRule()
      if (!this.okflag) {
        return false
      }
      this.ruleList = {}
      this.ruleList = {
        resiRuleList: [],
        houseRuleList: [],

      }

      if (this.personChecked) {
        this.ruleList.resiRuleList = this.resiRuleList
      }
      if (this.houseChecked) {
        this.ruleList.houseRuleList = this.houseRuleList
      }


      this.showPersonList = true
    },

    handleClose () {
      this.showPersonList = false

    },


    //选择人员信息第一列下拉框
    async handleSelGroup (personIndex, item, isSet) {
      const url = '/oper/customize/icformitem/getItemListV2'
      // const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/isServiceProject/service/serviceScopeTree'
      let params = {
        policyFlag: '1',
        groupId: item.id,

      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {

        let oneData = this.resiRuleList[personIndex]
        oneData.itemGroupName = item.label
        oneData.itemList = data
        oneData.colTable = item.tableName

        if (!isSet) {//如果是详情，赋值，不需要置空
          oneData.nextLogicalRel = ''
          oneData.itemId = ''
          oneData.queryType = ''
          oneData.colKey = ''
          oneData.colVal = ''
        }

        this.$set(this.resiRuleList, personIndex, oneData)

      } else {
        this.$message.error(msg)
      }
    },

    //选择人员信息第二列下拉框
    async handleSelGroupItem (personIndex, item, isSet) {

      let oneData = this.resiRuleList[personIndex]

      oneData.colKey = item.columnName
      oneData.colType = item.itemType
      oneData.itemLabel = item.label

      if (!isSet) {//如果是详情，赋值，不需要置空
        oneData.nextLogicalRel = ''
        oneData.queryType = ''
        oneData.colVal = ''
      }

      if (item.optionSourceType === 'remote') {
        const url = item.optionSourceValue

        let params = {}

        const { data, code, msg } = await requestPost(url, params)

        if (code === 0) {
          oneData.colOption = data
        } else {
          this.$message.error(msg)
        }
      } else {
        oneData.colOption = item.options
      }


      this.$set(this.resiRuleList, personIndex, oneData)

    },

    //选择人员信息第三列
    handleSelPersonQuery (personIndex, item) {
      let oneData = this.resiRuleList[personIndex]
      oneData.queryTypeName = item.label

      oneData.nextLogicalRel = ''
      oneData.colVal = ''
      oneData.colValLabel = ''

      this.$set(this.resiRuleList, personIndex, oneData)
    },
    //选择人员信息第四列
    handleSelPersonValue (personIndex, item) {
      let oneData = this.resiRuleList[personIndex]

      oneData.colValLabel = item.label
      oneData.nextLogicalRel = ''

      this.$set(this.resiRuleList, personIndex, oneData)
    },
    //选择人员信息第五列
    handleSelPersonLogical (personIndex, item) {
      let oneData = this.resiRuleList[personIndex]

      oneData.nextLogicalRelName = item.label

      this.$set(this.resiRuleList, personIndex, oneData)
    },

    //选择房屋信息第二列下拉框
    async handleSelHouseItem (houseIndex, item, isSet) {

      let oneData = this.houseRuleList[houseIndex]

      oneData.colTable = item.tableName
      oneData.colType = item.itemType
      oneData.itemLabel = item.label

      if (!isSet) {//如果是详情，赋值，不需要置空
        oneData.nextLogicalRel = ''
        oneData.queryType = ''
        oneData.colVal = ''
      }

      if (item.optionSourceType === 'remote') {
        const url = item.optionSourceUrl
        let params = {}
        if (item.optionSourceParam) {
          params = JSON.parse(item.optionSourceParam)
        } else {
          params = {}
        }

        const { data, code, msg } = await requestPost(url, params)

        if (code === 0) {
          oneData.colOption = data
        } else {
          this.$message.error(msg)
        }
      } else {
        oneData.colOption = []
      }

      this.$set(this.houseRuleList, houseIndex, oneData)

    },

    //选择房屋第三列
    handleSelHouseQuery (houseIndex, item) {
      let oneData = this.houseRuleList[houseIndex]
      oneData.queryTypeName = item.label

      oneData.nextLogicalRel = ''
      oneData.colVal = ''
      oneData.colValLabel = ''

      this.$set(this.houseRuleList, houseIndex, oneData)
    },
    //选择房屋第四列
    handleSelHouseValue (houseIndex, item) {
      let oneData = this.houseRuleList[houseIndex]
      oneData.colValLabel = item.label
      oneData.nextLogicalRel = ''

      this.$set(this.houseRuleList, houseIndex, oneData)
    },
    //选择房屋第五列
    handleSelHouseLogical (houseIndex, item) {
      let oneData = this.houseRuleList[houseIndex]
      oneData.nextLogicalRelName = item.label

      this.$set(this.houseRuleList, houseIndex, oneData)
    },

    addHouse () {

      let obj = {
        ruleDesc: '',
        nextLogicalRel: '',//与上一条的关系；and、or	
        queryType: '',
        colTable: '',
        colKey: '',
        colVal: '',

        titleName: '房屋信息',
        colType: '',//详细参数的组件类型
        colOption: [],
        itemGroupName: '房屋信息',
        itemLabel: '',
        queryTypeName: '',
        colValLabel: '',
        nextLogicalRelName: '',
      }

      this.houseRuleList.push(obj)
    },

    delHouse (index) {
      this.houseRuleList.splice(index, 1);
    },




    // 获取人员信息---第一列
    async loadPersonGroup () {
      const url = '/oper/customize/icformitemgroup/list'
      // const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/isServiceProject/service/serviceScopeTree'
      let params = {
        formCode: 'resi_base_info',
        policyFlag: '1'
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.groupList = data
      } else {
        this.$message.error(msg)
      }


    },
    // 获取房屋信息--第二列
    async loadHouseItem () {
      const url = '/heart/policy/item-list/' + 'house'

      let params = {}

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.houseItemList = data
      } else {
        this.$message.error(msg)
      }


    },

    async loadDicOption () {
      const url = '/sys/dict/data/dictlist'
      // const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/isServiceProject/service/serviceScopeTree'
      let params = {
        dictType: "sql_query_type"
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.queryList = data
      } else {
        this.$message.error(msg)
      }

    },


    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  computed: {
    dataRule () {
      return {


        serviceTimeStart: [
          { required: true, message: '服务时间不能为空', trigger: 'blur' }
        ],
        serviceScope: [
          { required: true, message: '服务范围不能为空', trigger: 'blur' }
        ],

      }
    },
    feedbackDataRule () {
      return {


        serviceGoal: [
          { required: true, message: '服务目标不能为空', trigger: 'blur' }
        ],

        serviceEffect: [
          { required: true, message: '服务效果不能为空', trigger: 'blur' }
        ],
        servicePeopleNumber: [
          { required: true, message: '服务人数不能为空', trigger: 'blur' }
        ],
        serviceStatus: [
          { required: true, message: '服务状态不能为空', trigger: 'blur' }
        ],
        satisfaction: [
          { required: true, message: '满意度不能为空', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '地址不能为空', trigger: 'blur' }
        ]
      }
    },

  },
  props: {

    formType: {
      type: String,
      required: 'true'
    },
    index: {
      type: Number,
      default: 1
    },

  }
}
</script>


<style lang="scss" scoped >
.m-main {
  display: flex;
  margin-top: 15px;
}

.tab-title {
  margin-right: 20px;
  cursor: pointer;
}

.tab-title-sel {
  color: #3e8ef7;
  text-decoration: underline;
}

.row-item {
  display: flex;
  margin-bottom: 10px;
}
.row-item-one {
  display: flex;
}
.item_width_1 {
  width: 120px;
  margin-right: 10px;
}
.item_width_2 {
  width: 200px;
  margin-right: 10px;
}

/deep/ .el-checkbox {
  margin-right: 10px;
}
/deep/.el-checkbox:last-of-type {
  margin-right: 10px;
}

.img_del {
  width: 25px;
  height: 25px;
  margin-top: 3px;
  cursor: pointer;
}
</style>