epmet-oper-gov/src/views/modules/communityService/policy/rule.vue

<template>
  <div>
    <div>
      <el-checkbox v-model="personChecked"></el-checkbox>
      <span @click="clickTab('person')"
            :class="['tab-title',{'tab-title-sel':personSel}]">人员信息</span>
      <el-checkbox v-model="houseChecked"></el-checkbox>
      <span @click="clickTab('house')"
            :class="['tab-title',{'tab-title-sel':houseSel}]">房屋信息</span>
      <el-checkbox v-model="staticChecked"></el-checkbox>
      <span @click="clickTab('static')"
            :class="['tab-title',{'tab-title-sel':staticSel}]">统计信息</span>

      <el-button class="diy-button--search"
                 size="mini">预览</el-button>

      <el-button class="diy-button--add"
                 @click="addRule"
                 size="mini">增加</el-button>
    </div>

    <div v-if="personSel">
      <div v-for="(personItem,personIndex) in resiRuleList"
           :key="personIndex"
           class="row-item">
        <el-select class="item_width_1"
                   v-model="personItem.itemGroupId"
                   size="mini"
                   placeholder="全部"
                   clearable>
          <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="mini"
                   placeholder="全部"
                   clearable>
          <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="mini"
                   placeholder="全部"
                   clearable>
          <el-option v-for="item in queryList"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
        <div>

          <el-select v-if="personItem.colType==='select'||personItem.colType==='radio'||personItem.colType==='checkbox'"
                     class="item_width_1"
                     v-model="personItem.colVal"
                     size="mini"
                     placeholder="全部"
                     clearable>
            <el-option v-for="item in personItem.colOption"
                       :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_1"
                           v-model="personItem.colVal"
                           :min="0"
                           size="mini"
                           label="请输入"></el-input-number>

          <el-date-picker v-else-if="personItem.colType==='datepicker'||personItem.colType==='date'"
                          v-model="personItem.colVal"
                          class="item_width_1"
                          type="date"
                          value-format="yyyy-MM-dd"
                          value="yyyy-MM-dd"
                          placeholder="开始时间">
          </el-date-picker>
          <el-input v-else
                    class="item_width_1"
                    size="mini"
                    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="mini"
                   placeholder="全部"
                   clearable>
          <el-option v-for="item in logicalList"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>

        <el-button icon="el-icon-remove-outline"
                   circle
                   @click="delPerson(personIndex)"
                   type="danger"></el-button>

      </div>

    </div>

    <div v-if="houseSel">
      <div v-for="(houseItem,houseIndex) in houseRuleList"
           :key="houseIndex"
           class="row-item">
        <el-input class="item_width_1"
                  size="mini"
                  placeholder="请输入"
                  :disabled="true"
                  v-model="houseItem.titleName">
        </el-input>
        <el-select class="item_width_1"
                   v-model="houseItem.colKey"
                   size="mini"
                   placeholder="全部"
                   clearable>
          <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="mini"
                   placeholder="全部"
                   clearable>
          <el-option v-for="item in queryList"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
        <div>

          <el-select v-if="houseItem.colType==='select'||houseItem.colType==='radio'||houseItem.colType==='checkbox'"
                     class="item_width_1"
                     v-model="houseItem.colVal"
                     size="mini"
                     placeholder="全部"
                     clearable>
            <el-option v-for="item in houseItem.colOption"
                       :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_1"
                           v-model="houseItem.colVal"
                           :min="0"
                           size="mini"
                           label="请输入"></el-input-number>
          <el-date-picker v-else-if="houseItem.colType==='datepicker'||houseItem.colType==='date'"
                          v-model="houseItem.colVal"
                          class="item_width_1"
                          type="date"
                          size="mini"
                          value-format="yyyy-MM-dd"
                          value="yyyy-MM-dd"
                          placeholder="开始时间">
          </el-date-picker>
          <el-input v-else
                    class="item_width_1"
                    size="mini"
                    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="mini"
                   placeholder="全部"
                   clearable>
          <el-option v-for="item in logicalList"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>

        <el-button icon="el-icon-remove-outline"
                   circle
                   @click="delHouse(houseIndex)"
                   type="danger"></el-button>

      </div>

    </div>

    <div v-if="staticSel">
      <div v-for="(staticItem,staticIndex) in statRuleList"
           :key="staticIndex"
           class="row-item">
        <el-input class="item_width_1"
                  size="mini"
                  placeholder="请输入"
                  :disabled="true"
                  v-model="staticItem.titleName">
        </el-input>
        <el-select class="item_width_1"
                   v-model="staticItem.colKey"
                   size="mini"
                   placeholder="全部"
                   clearable>
          <el-option v-for="item in staticItemList"
                     @click.native="handleSelStaticItem(staticIndex,item)"
                     :key="item.colKey"
                     :label="item.label"
                     :value="item.colKey">
          </el-option>
        </el-select>
        <el-select class="item_width_1"
                   v-model="staticItem.queryType"
                   size="mini"
                   placeholder="全部"
                   clearable>
          <el-option v-for="item in queryList"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
        <div>

          <el-select v-if="staticItem.colType==='select'||staticItem.colType==='radio'||staticItem.colType==='checkbox'"
                     class="item_width_1"
                     v-model="staticItem.colVal"
                     size="mini"
                     placeholder="全部"
                     clearable>
            <el-option v-for="item in staticItem.colOption"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
          <el-input-number v-else-if="staticItem.colType==='inputNum'"
                           class="item_width_1"
                           v-model="staticItem.colVal"
                           :min="0"
                           size="mini"
                           label="请输入"></el-input-number>
          <el-date-picker v-else-if="staticItem.colType==='datepicker'||staticItem.colType==='date'"
                          v-model="staticItem.colVal"
                          class="item_width_1"
                          type="date"
                          value-format="yyyy-MM-dd"
                          value="yyyy-MM-dd"
                          placeholder="开始时间">
          </el-date-picker>
          <el-input v-else
                    class="item_width_1"
                    size="mini"
                    placeholder="请输入"
                    v-model="staticItem.colVal">
          </el-input>
        </div>

        <el-select v-if="staticIndex<(statRuleList.length-1)"
                   class="item_width_1"
                   v-model="staticItem.nextLogicalRel"
                   size="mini"
                   placeholder="全部"
                   clearable>
          <el-option v-for="item in logicalList"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>

        <el-button icon="el-icon-remove-outline"
                   circle
                   @click="delStatic(staticIndex)"
                   type="danger"></el-button>

      </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,
      staticChecked: false,

      personSel: true,
      houseSel: false,
      staticSel: false,

      groupList: [],
      queryList: [],
      logicalList: [
        {
          label: '并且',
          value: 'and'
        },
        {
          label: '或者',
          value: 'or'
        }
      ],
      houseItemList: [],//房屋信息第二列
      staticItemList: [],//统计信息第二列
      resiRuleList: [],
      resiRuleList1: [
        {
          ruleDesc: '',//规则描述文字，例如：基础信息性别等于女	
          nextLogicalRel: '',//与上一条的关系；and、or	
          itemGroupId: '',
          itemId: '',
          queryType: '',
          colTable: '',
          colKey: '',
          colVal: '',

          itemList: [],
          colType: '',//详细参数的组件类型
          colOption: [],

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

          titleName: '房屋信息',
          colType: '',//详细参数的组件类型
          colOption: [],
        }
      ],
      statRuleList: [],
      statRuleList1: [
        {
          ruleDesc: '',
          nextLogicalRel: '',//与上一条的关系；and、or	
          queryType: '',
          colTable: '',
          colKey: '',
          colVal: '',

          titleName: '统计信息',
          colType: '',//详细参数的组件类型
          colOption: [],

        }
      ],
      okflag: false,

    }
  },

  watch: {

  },
  components: {},
  async mounted () {
    this.loadPersonGroup()
    this.loadHouseItem()
    this.loadStaticItem()
    this.loadDicOption()
  },


  methods: {
    async setRule (resiRuleList, houseRuleList, statRuleList) {
      this.resiRuleList = resiRuleList


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

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

        if (selGroup.length > 0) {
          this.handleSelGroup(index, selGroup[0], true)
        }

      });


      this.houseRuleList = houseRuleList

      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)
        }

      });

      this.statRuleList = statRuleList

      this.statRuleList.forEach((element, index) => {

        let selStaticItem = this.staticItemList.filter((item) =>
          element.colKey === item.colKey
        );

        if (selStaticItem.length > 0) {
          this.handleSelStaticItem(index, selStaticItem[0], true)
        }

      });

    },

    getRule () {
      this.okflag = false
      let messageObj = this.validateRule()

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

      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 = ''
        }

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

        this.okflag = true
      }

    },

    validateRule () {

      let message = ''

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

        if (index === this.resiRuleList.length - 1) {
          if (
            item.ruleDesc === '' ||
            item.itemGroupId === '' ||
            item.itemId === '' ||
            item.queryType === '' ||
            item.colKey === '' ||
            item.colVal === '') {

            message = '人员信息不完整，请填写完整！'
            return message
          }
        } else {
          if (item.nextLogicalRel === '' ||
            item.ruleDesc === '' ||
            item.itemGroupId === '' ||
            item.itemId === '' ||
            item.queryType === '' ||
            item.colKey === '' ||
            item.colVal === '') {

            message = '人员信息不完整，请填写完整！'
            return message
          }
        }

      });

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

        if (index === this.houseRuleList.length - 1) {

          if (

            item.ruleDesc === '' ||
            item.queryType === '' ||
            item.colKey === '' ||
            item.colVal === '') {

            message = '房屋信息不完整，请填写完整！'
            return message
          }
        } else {
          if (item.nextLogicalRel === '' ||
            item.ruleDesc === '' ||
            item.queryType === '' ||
            item.colKey === '' ||
            item.colVal === '') {

            message = '房屋信息不完整，请填写完整！'
            return message
          }
        }
      });

      this.statRuleList.forEach((item, index) => {
        if (index === this.statRuleList.length - 1) {
          if (

            item.ruleDesc === '' ||
            item.queryType === '' ||
            item.colKey === '' ||
            item.colVal === '') {

            message = '统计信息不完整，请填写完整！'
            return message
          }
        } else {
          if (
            item.nextLogicalRel === '' ||
            item.ruleDesc === '' ||
            item.queryType === '' ||
            item.colKey === '' ||
            item.colVal === '') {

            message = '统计信息不完整，请填写完整！'
            return message
          }
        }
      });


      return message
    },

    clickTab (type) {
      if (type === 'person') {
        this.personSel = true
        this.houseSel = false
        this.staticSel = false
      }
      if (type === 'house') {
        this.personSel = false
        this.houseSel = true
        this.staticSel = false
      }
      if (type === 'static') {
        this.personSel = false
        this.houseSel = false
        this.staticSel = true
      }
    },

    addRule () {
      if (this.personSel) {
        this.addPerson()
      }

      if (this.houseSel) {
        this.addHouse()
      }

      if (this.staticSel) {
        this.addStatic()
      }
    },

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

        itemList: [],
        colType: '',//详细参数的组件类型
        colOption: [],
      }

      this.resiRuleList.push(obj)
    },

    delPerson (index) {
      this.resiRuleList.splice(index, 1);
    },

    addHouse () {
      let obj = {
        ruleDesc: '房屋信息',
        nextLogicalRel: 'and',//与上一条的关系；and、or	
        queryType: '',
        colTable: '',
        colKey: '',
        colVal: '',

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

      this.houseRuleList.push(obj)
    },

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

    addStatic () {
      let obj = {
        ruleDesc: '统计信息',
        nextLogicalRel: 'and',//与上一条的关系；and、or	
        queryType: '',
        colTable: '',
        colKey: '',
        colVal: '',

        titleName: '统计信息',
        colType: '',//详细参数的组件类型
        colOption: [],
      }

      this.statRuleList.push(obj)
    },

    delStatic (index) {
      this.statRuleList.splice(index, 1);
    },

    //选择人员信息第一列下拉框
    async handleSelGroup (personIndex, item, isEdit) {
      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.ruleDesc = item.label
        oneData.itemList = data
        oneData.colTable = item.tableName
        this.$set(this.resiRuleList, personIndex, oneData)

        if (isEdit) {
          let selItem = oneData.itemList.filter((item) =>
            oneData.itemId === item.itemId);
          if (selItem.length > 0) {
            this.handleSelGroupItem(personIndex, selItem[0])
          }
        }
      } else {
        this.$message.error(msg)
      }
    },

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

      let oneData = this.resiRuleList[personIndex]

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

      oneData.ruleDesc = oneData.ruleDesc + item.label


      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)

    },

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

      let oneData = this.houseRuleList[houseIndex]

      oneData.colTable = item.tableName
      oneData.colType = item.itemType
      oneData.ruleDesc = oneData.ruleDesc + item.label

      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)

    },
    //选择统计信息第二列下拉框
    async handleSelStaticItem (staticIndex, item) {

      let oneData = this.statRuleList[staticIndex]

      oneData.colTable = item.tableName
      oneData.colType = item.itemType
      oneData.ruleDesc = oneData.ruleDesc + item.label

      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.statRuleList, staticIndex, oneData)

    },

    // 获取人员信息---第一列
    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 loadStaticItem () {
      const url = '/heart/policy/item-list/' + 'stat'

      let params = {}

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

      if (code === 0) {
        this.staticItemList = 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: {


  }
}
</script>


<style lang="scss" scoped >
@import "@/assets/scss/buttonstyle.scss";

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

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

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

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