thoth-frontend-test/src/views/reportManagement/components/template/customTemplate.vue

<template>
  <el-row :gutter="20" class="Layout">
    <el-col v-for="(item, index) in customs" :key="index" :span="12">
      <span v-if="!show && isShow(item) || show && item.bool" style="margin-bottom:20px;" class="Layout_space_between">
        <span class="from-name"><span v-if="item.required" style="color: red;">*</span>{{ item.fieldName }} </span>
        <el-input v-if="item.type === 1" v-model="item.content" size="small" :disabled="disab" style="width:100%;" placeholder="请输入" @change="getFormValue" />
        <el-input v-if="item.type === 2" v-model="item.content" type="textarea" size="small" :disabled="disab" :rows="1" style="width:100%;" placeholder="请输入" @change="getFormValue" />
        <el-select v-if="item.type === 3" v-model="item.content" clearable size="small" :disabled="disab" style="width:100%;" placeholder="请选择" @change="getFormValue(item)">
          <el-option v-for="i in item.options" :key="i" :label="i" :value="i" />
        </el-select>
        <el-select v-if="item.type === 4" v-model="item.contents" multiple clearable size="small" :disabled="disab" style="width:100%;" placeholder="请选择" @change="getFormValue(item)">
          <el-option v-for="(i, c) in item.options" :key="c" :label="i" :value="i" />
        </el-select>
      </span>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: {
    custom: { type: Array, required: false, default: null },
    baseFrom: { type: Object, required: false, default: null },
    disab: { type: Boolean, default: false }
  },
  data() {
    return {
      customs: [],
      show: false
    }
  },
  watch: {
    custom: {
      handler(newV) {
        this.customs = newV.map(e => e)
        console.log(this.customs, '新的志')
        if (newV && newV[0].bool) {
          this.show = true
          this.customs.map(item => {
            this.baseFrom[`${item.fieldKey}_${item.content}`] = item.content
            if (item.contents && item.contents[0]) {
              item.contents.map(elm => {
                this.baseFrom[`${item.fieldKey}_${elm}`] = elm
              })
            }
          })
          console.log(this.customs, '新的志')
          return
        }
        this.show = false
        this.customs = newV.map(item => ({
          ...item,
          bool: item.conditions === '默认展示' || this.getBoolValue(item.conditions)
        }))
      },
      immediate: true
    }
  },
  methods: {
    isShow(item) {
      if (item.conditions === '默认展示') {
        return true
      }
      console.log(this.baseFrom, item.conditions, item)
      if (this.baseFrom[item.conditions] === item.conditions.split('_')[1]) {
        return true
      }
      return false
    },
    getBoolValue(conditions) {
      const checkList = []
      this.customs.forEach(item => {
        if (item.content && item.type < 4) {
          checkList.push(`${item.fieldKey}_${item.content}`)
        }
        if (item.contents && item.type === 4) {
          item.contents.forEach(contentItem => {
            checkList.push(`${item.fieldKey}_${contentItem}`)
          })
        }
      })
      console.log(checkList.indexOf(conditions) !== -1, '返回的bool')
      return checkList.indexOf(conditions) !== -1
    },
    getFormValue(e) {
      console.log(e)
      this.show = false
      const params = {}
      const keys = []
      this.customs.map(item => {
        if (e.type < 4) {
          if (item.conditions === `${e.fieldKey}_${e.content}`) {
            item.bool = true
            item.bools = true
          } else {
            if (item.conditions.split('_')[0] === e.fieldKey) {
              item.bool = false
              delete item.bools
            }
          }
        } else if (e.type === 4) {
          e.contents.map(i => {
            if (item.conditions === `${e.fieldKey}_${i}`) {
              item.bool = true
              item.bools = true
            } else {
              if (item.conditions.split('_')[0] === e.fieldKey) {
                item.bool = false
                delete item.bools
              }
            }
            // item.conditions === `${e.fieldKey}_${i}` ? item.bool = true : ''
          })
        }
      })
      // 单选
      if (e.type === 3) {
        params[`${e.fieldKey}_${e.content}`] = e.content
      }
      // 多选
      if (e.type === 4) {
        e.contents.forEach(elm => {
          params[`${e.fieldKey}_${elm}`] = elm
        })
      }
      // 删除多余字段
      Object.keys(this.baseFrom).forEach(key => {
        if (key.indexOf(e.fieldKey) > -1) {
          keys.push(key)
        }
      })
      this.$emit('formData', {
        customs: this.customs,
        keys,
        params
      })
    },
    CustomSet(e) {
      const key = Object.keys(e)[0]
      const custom = {
        followVersion: {
          key: 'followVersion',
          label: '是否跟版',
          values: 0
        },
        isCodeReview: {
          key: 'isCodeReview',
          label: '是否codereview',
          values: 1
        }
      }
      const label = custom[key].label
      // const value = e[key] + custom[key].values
      const value = e[key]

      // this.customs.forEach(elm => {
      //   elm.conditions = ''
      // })
      const keys = []
      const params = {
        [`${label}_${value}`]: `${value}`
      }
      // 删除多余字段
      Object.keys(this.baseFrom).forEach(key => {
        if (key.indexOf(label) > -1) {
          keys.push(key)
        }
      })
      this.$emit('formData', {
        customs: this.customs.map(e => e),
        keys,
        params
      })
      // this.$emit('formData', {
      //   customs: this.customs,
      //   keys,
      //   params
      // })
      // console.log(e, this.customs, this.baseFrom, 'xcdjks ncjksdjnk')
    }
  }
}
</script>

<style lang="less" scoped>
  @import '@/styles/PublicStyle/index.less';
  .from-name {
    width: 150px !important;
  }
  .Layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
</style>