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

<template>
  <div>
    <normal-dialog
      v-if="modalShow"
      ref="normalDialog"
      :show-dialog="false"
      is-succes
      :title="titleName"
      width="400px"
      @succes="updateModule"
    >
      <el-form label-width="100px" style="padding-right: 20px">
        <el-form-item label="问题">
          <el-input
            v-model="normalAreaName"
            autocomplete="off"
            size="mini"
            maxlength="100"
            show-word-limit
            placeholder="请输入问题"
          />
        </el-form-item>
        <el-form-item label="责任团队">
          <Cascader v-model="cascaderValue" />
<!--          <el-cascader-->
<!--            v-model="cascaderValue"-->
<!--            style="width: 100%"-->
<!--            :options="selectEnum"-->
<!--            size="mini"-->
<!--            collapse-tags-->
<!--            :props="{ multiple: true }"-->
<!--            clearable-->
<!--          />-->
        </el-form-item>
        <el-form-item label="责任人">
          <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 './Cascader'
import normalDialog from '@/components/dialog/normalDialog'
import Clickoutside from 'element-ui/src/utils/clickoutside'
import searchPeople from '@/components/select/searchPeople'
// import _ from 'lodash' // 人员select

export default {
  name: 'CreatedItem',
  components: {
    normalDialog,
    searchPeople,
    Cascader
  },
  directives: { Clickoutside },
  data() {
    return {
      modalShow: false,
      titleName: '标记为重点问题',
      normalAreaName: '',
      menuData: '',
      callBack: null,
      columns: null,
      cascaderValue: null,
      multiplePeople: null
    }
  },
  computed: {
    tabPageData() {
      return this.$store.state.monthlyReportEdit.tabPageData
    },
    selectEnum() {
      return this.$store.state.monthlyReportEdit.selectEnum
    }
  },
  methods: {
    uuid10,
    openModal({ title, scope, columns, normalAreaName }) {
      console.log({ title, scope, columns, normalAreaName })
      this.titleName = title
      if (scope) this.menuData = scope.row
      if (columns) this.columns = columns
      this.$refs.normalDialog.visible = true
      this.modalShow = true
      if (normalAreaName) this.normalAreaName = normalAreaName
      this.setDefaultValues()
    },
    // 设置默认值
    setDefaultValues() {
      this.columns &&
        this.columns.forEach((elm) => {
          if (elm.name === '问题') {
            this.normalAreaName = this.menuData[elm.headerKey]
          }
          if (elm.name === '归属团队') {
            this.cascaderValue = this.menuData[elm.headerKey]
          }
          if (elm.name === '负责人') {
            this.multiplePeople = [this.menuData[elm.headerKey]]
          }
        })
    },
    updateModule() {
      this.$store.commit('monthlyReportEdit/MARK_ISSUES', {
        cascaderValue: this.cascaderValue,
        normalAreaName: this.normalAreaName,
        multiplePeople: this.multiplePeople
      })
      this.modalShow = false
      this.$refs.normalDialog.visible = false
    }
  }
}
</script>
<style scoped lang="less">
/deep/ .el-form-item__label {
  text-align: left!important;
}
</style>