thoth-frontend-test/src/views/monthlyReport/childrenPage/editReport/components/markingIssues.vue

<template>
  <div>
    <normal-dialog
        v-if="modalShow"
        ref="normalDialog"
        v-loading="loading"
        :show-dialog="false"
        is-succes
        :title="titleName"
        width="45%"
        @succes="updateModule"
    >
      <el-form :key="domKey" label-width="100px" style="padding-right: 20px;padding-left: 20px">
        <el-form-item label="问题">
          <el-input
              v-model="normalAreaName"
              autocomplete="off"
              size="small"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 30 }"
              show-word-limit
              placeholder="请输入问题"
          />
        </el-form-item>
        <el-form-item label="责任团队">
          <Cascader v-model="cascaderValue" />
        </el-form-item>
        <el-form-item label="责任人">
          <searchPeople
              ref="searchPeople"
              style="width: 100%"
              :value.sync="multiplePeople"
              :multiple="true"
          />
        </el-form-item>
      </el-form>
    </normal-dialog>
  </div>
</template>
<script>
import { uuid10 } from '@/utils'
import Cascader from '@/components/select/selectCascader'
import normalDialog from '@/components/dialog/normalDialog'
import Clickoutside from 'element-ui/src/utils/clickoutside'
import searchPeople from '@/components/select/searchPeople'
import { getDeptCharge } from '@/api/qualityMonthlyReport/edit'
// import _ from 'lodash' // 人员select

export default {
  name: 'CreatedItem',
  components: {
    normalDialog,
    searchPeople,
    Cascader
  },
  directives: { Clickoutside },
  data() {
    return {
      modalShow: false,
      titleName: '标记为重点问题',
      normalAreaName: '',
      menuData: '',
      domKey: '123456',
      callBack: null,
      columns: null,
      cascaderValue: null,
      headerTitle: null,
      subTitles: null,
      loading: false,
      multiplePeople: null
    }
  },
  computed: {
    tabPageData() {
      return this.$store.state.monthlyReportEdit.tabPageData
    },
    selectEnum() {
      return this.$store.state.monthlyReportEdit.selectEnum
    }
  },
  watch: {
    cascaderValue: {
      handler(newV, old) {
        if (newV.length) {
          if (this.$refs.searchPeople) {
            this.$refs.searchPeople.firstGetArr = true
          }
          this.setDeptCharge()
        } else {
          this.multiplePeople = ''
        }
      },
      deep: true
    }
  },
  methods: {
    uuid10,
    openModal(params) {
      this.loading = true
      this.multiplePeople = null
      this.domKey = new Date().getTime()
      const { title, scope, columns, normalAreaName, subTitles, headerTitle } = params
      this.titleName = title
      if (scope) this.menuData = scope.row
      if (columns) this.columns = columns
      this.$refs.normalDialog.visible = true
      this.modalShow = true
      this.subTitles = subTitles
      this.headerTitle = headerTitle
      if (normalAreaName) this.normalAreaName = normalAreaName
      // this.setDefaultValues()
      this.loading = false
    },
    // 设置默认值
    setDefaultValues() {
      this.normalAreaName = ''
      this.columns &&
      this.columns.forEach((elm) => {
        // 线上问题
        if (elm.name === '定级' && this.headerTitle === '线上问题' && this.normalAreaName.search(/级线上问题/) < 0) {
          this.normalAreaName = `${this.menuData[elm.headerKey]}级线上问题：${this.normalAreaName}`
        }
        if (elm.name === '问题') {
          this.normalAreaName += this.menuData[elm.headerKey]
        }
        if (elm.name.search(/团队/) > -1) {
          this.cascaderValue = this.menuData[elm.headerKey]
        }
        if (elm.name === '负责人') {
          this.multiplePeople = [this.menuData[elm.headerKey]]
        }
      })
      // 延期
      if (this.headerTitle.search(/延期 - |提测打回/) > -1) {
        this.normalAreaName = ''
        // elm.name === '延期类型'
        const headerKeyYQ = this.columns.filter(elm => elm.name.search(/类型/) > -1)[0]
        const headerKeyMC = this.columns.filter(elm => elm.name === '项目名称')[0]
        this.normalAreaName = `${this.menuData[headerKeyYQ.headerKey]}${this.menuData[headerKeyYQ.headerKey] && this.menuData[headerKeyMC.headerKey] && '：'}${this.menuData[headerKeyMC.headerKey]}`
      }
      // 线下缺陷：
      if (this.headerTitle === '线下缺陷') {
        this.normalAreaName = ''
        this.subTitles &&
        this.subTitles.forEach((elm, index) => {
          // this.normalAreaName += `${elm.copywriter}：${elm.label}`
          if (index < 3) {
            this.normalAreaName += `${elm.copywriter}：${elm.label}个${
              index === 2 ? '；' : '，'
            }`
          }
          if (index === 3 && elm.label !== '--') {
            this.normalAreaName += `${elm.copywriter}：${elm.label}h；`
          }
          if (index === 4 && elm.label !== '--') {
            this.normalAreaName += `${elm.copywriter}：${elm.label}%；`
          }
          if (index === 5) {
            this.normalAreaName += `${elm.copywriter}：${elm.label}。`
          }
        })
      }
      // 发布&回滚
      if (this.headerTitle.search(/发布&回滚/) > -1) {
        const headerKeyMK = this.columns.filter(
          (elm) => elm.name.search(/模块/) > -1
        )[0]
        this.normalAreaName =
            this.menuData[headerKeyMK.headerKey] &&
            `${this.menuData[headerKeyMK.headerKey]}模块一次全量回滚`
      }
      if (this.cascaderValue && this.cascaderValue.length) {
        this.setDeptCharge()
      }
    },
    updateModule() {
      this.$store.commit('monthlyReportEdit/MARK_ISSUES', {
        cascaderValue: this.cascaderValue,
        normalAreaName: this.normalAreaName,
        multiplePeople: this.multiplePeople
      })
      this.modalShow = false
      this.$refs.normalDialog.visible = false
    },
    // 根据部门数据，设置团队负责人
    async setDeptCharge() {
      const res = await getDeptCharge({ deptCode: this.cascaderValue })
      if (res.code === 200) {
        if (!this.multiplePeople) {
          this.multiplePeople = []
        }
        // this.multiplePeople = [...this.multiplePeople, ...res.data.map(elm => elm.manageName)]
        this.multiplePeople = res.data.map(elm => elm.manageName)
        this.multiplePeople = Array.from(new Set(this.multiplePeople))
      }
    }
  }
}
</script>
<style scoped lang="less">
/deep/ .el-form-item__label {
  text-align: left !important;
}

.el-form-item {
  margin-bottom: 10px;
}

/deep/ .el-dialog__body {
  padding-bottom: 0;
}
</style>