thoth-frontend-test/src/views/projectManage/dialog_vue.vue

<template>
  <div class="task">
    <el-dialog :visible.sync="dialogFormVisible" width="70%" :close-on-click-modal="false">
      <div style="display:flex;align-items: center;margin: 0% 7% 2% 4.5%;">
        <div style="width:4px;height:17px;background:#409EFF;border-radius:1px;" />
        <div style="width:83px;height:20px;font-size:18px;font-family:MicrosoftYaHei;color:rgba(51,59,74,1);margin-left:6px">{{ tit_Name }}</div>
      </div>
      <el-form ref="task_form" :model="task_form" :rules="task_rulesForm" label-position="right" style="margin-right: 3%;" label-width="120px">
        <el-form-item label="任务名称" prop="name" style="width: 100%">
          <el-input v-model="task_form.name" autocomplete="off" placeholder="请输入任务名称" />
        </el-form-item>
        <div style="display:flex;align-items: center;justify-content: space-between;">
          <el-form-item label="直接归属" prop="source">
            <el-radio-group v-model="task_form.source" @change="get_source(task_form.source)">
              <el-radio :label="1">不归属</el-radio>
              <el-radio :label="2">需求</el-radio>
              <el-radio :label="3">项目</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="ascription_demand" label="归属需求" prop="requireId">
            <el-select v-model="task_form.requireId" filterable clearable placeholder="请选择" style="width:20vw">
              <el-option v-for="item in demandList" :key="item.code" :label="item.msg" :value="item.code" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="ascription_project" label="归属项目" prop="projectId">
            <el-select v-model="task_form.projectId" filterable clearable placeholder="请选择" style="width:20vw">
              <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </div>
        <div style="display:flex;align-items: center;justify-content: space-between;">
          <div>
            <el-form-item label="业务/平台/模块" prop="clientType">
              <el-cascader v-model="task_form.cliType" :options="business_platform_Modular" style="width: 20vw" />
            </el-form-item>
            <el-form-item label="开发负责人">
              <el-select v-model="task_form.rdOwner" filterable remote reserve-keyword placeholder="请输入姓名或邮箱前缀" :remote-method="remoteMethod" :loading="loading" style="width: 100%">
                <el-option v-for="item in options" :key="item.idap" :label="item.name" :value="test2(item, 0)">
                  <div style="display: flex;justify-content: start;">
                    <div style="min-width:100px;color: #8492a6; font-size: 13px; overflow:hidden">{{ item.deptName }}</div>
                    <div style="min-width:80px">{{ item.name }}</div>
                    <div style="min-width:100px;color: #8492a6; font-size: 13px; overflow:hidden">{{ item.idap }}</div>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="是否免测" prop="notest">
              <el-radio-group v-model="task_form.notest">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="测试负责人">
              <el-select v-model="task_form.qaOwner" filterable remote reserve-keyword placeholder="请输入姓名或邮箱前缀" :remote-method="remoteMethod" :loading="loading" style="width: 20vw">
                <el-option v-for="item in options" :key="item.idap" :label="item.name" :value="test2(item, 0)">
                  <div style="display: flex;justify-content: start;">
                    <div style="min-width:100px;color: #8492a6; font-size: 13px; overflow:hidden">{{ item.deptName }}</div>
                    <div style="min-width:80px">{{ item.name }}</div>
                    <div style="min-width:100px;color: #8492a6; font-size: 13px; overflow:hidden">{{ item.idap }}</div>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <el-form-item label="技术文档链接">
          <el-input v-model="task_form.devUrl" placeholder="请粘贴链接" />
        </el-form-item>
        <div style="display:flex;align-items: center;justify-content: space-between;">
          <el-form-item label="是否跟版" prop="followVersion">
            <el-radio-group v-model="task_form.followVersion" @change="get_followVersion(task_form.followVersion)">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="show_Client" label="涉及的客户端" prop="involveApp">
            <el-select v-model="task_form.involveApp" filterable remote reserve-keyword :loading="loading" clearable placeholder="请选择" style="width: 20vw">
              <el-option v-for="item in appClient" :key="item.code" :label="item.msg" :value="item.code" />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" style="padding:0 27px">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="tit_Name === '新建任务'?create_task(task_form):uptate_task(task_form)">创 建</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { taskCreate, memberQueryMemberInfoByIDAPorName, configShowTaskEnum, settingGetTypeMap, configShowRequirementVersionEnum, taskGet, taskUpdate } from '@/api/taskIndex' // ajax
import { projectList } from '@/api/projectIndex'
export default {
  data() {
    return {
      dialogFormVisible: false,
      task_form: {},
      ascription_project: false, // 归属项目（隐藏）
      ascription_demand: false, // 归属需求（隐藏）
      test: {},
      loading: false,
      tit: '', // 跳转
      tit_Name: '', // 新建（编辑）
      projectId: '', // 项目id
      requireId: '', // 需求id
      options: [], // 员工信息
      noTest: [], // 是否免测
      BusinessLine: [], // 业务线
      appClient: [], // 涉及业务线
      arr_platform: [], // 平台数据
      arr_Modular: [], // 模块数据‘
      business_platform_Modular: [], // 业务/平台/模块
      show_Client: false, // 涉及的客户端（显示）
      projectList: [], // 归属项目数据
      demandList: [], // 需求list
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname'),
      task_rulesForm: {
        name: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
        source: [{ required: true, message: '请输入直接归属', trigger: 'blur' }],
        requireId: [{ required: true, message: '请选择归属需求', trigger: 'blur' }],
        projectId: [{ required: true, message: '请选择归属项目', trigger: 'blur' }],
        followVersion: [{ required: true, message: '请选择是否跟版', trigger: 'blur' }],
        notest: [{ required: true, message: '请选择是否免测', trigger: 'blur' }],
        cliType: [{ required: true, message: '请选择业务/平台/模块', trigger: 'blur' }],
        involveApp: [{ required: true, message: '请选择涉及的客户端', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.get_taskSelect()
  },
  methods: {
    init(e, id) {
      this.tit_Name = '新建任务'
      switch (e) {
        case 1: // 新建任务（任务主页）
          this.task_form = {
            followVersion: 2
          }
          this.dialogFormVisible = true
          this.ascription_demand = false
          this.ascription_project = false
          this.$set(this.task_form, 'notest', 0)
          this.$set(this.task_form, 'followVersion', 2)
          this.show_Client = false
          this.$nextTick(() => {
            this.$refs['task_form'].clearValidate()
          })
          break
        case 2: // 新建任务（项目详情）
          this.tit = '新建任务'
          var url = window.location.href // 获取url中"?"符后的字串
          this.projectId = url.split('?id=')
          projectList({ id: Number(this.projectId[1]), curIndex: 1, pageSize: 15 }).then(res => {
            this.dialogFormVisible = true
            var that = this
            setTimeout(function() {
              that.task_form = {}
              that.ascription_demand = false
              that.ascription_project = true
              that.$set(that.task_form, 'source', 3)
              that.$set(that.task_form, 'notest', 0)
              that.$set(that.task_form, 'followVersion', 2)
              that.$set(that.task_form, 'requireId', res.data[0].id)
              that.$set(that.task_form, 'projectId', res.data[0].id)
              that.task_form.followVersion === 2 ? that.show_Client = false : ''
            }, 300)
          })
          break
        case 3: // 编辑任务（任务详情）
          this.tit_Name = '编辑任务'
          taskGet(id[1]).then(res => {
            this.dialogFormVisible = true
            var that = this
            setTimeout(function() {
              that.task_form = {}
              that.task_form = res.data
              that.task_form.source === 3 ? that.ascription_project = true : that.ascription_project = false
              that.task_form.source === 2 ? that.ascription_demand = true : that.ascription_demand = false
              that.task_form.source === 1 ? that.ascription_demand = false : ''
              that.task_form.source === 1 ? that.ascription_project = false : ''
              that.task_form.followVersion === 2 ? that.show_Client = false : that.show_Client = true
              that.task_form.followVersion === 1 ? that.show_Client = true : that.show_Client = false
              that.task_form.cliType = [res.data.bizId, res.data.type, res.data.clientType]
              that.task_form.involveApp = Number(res.data.involveApp)
              const arr_object = []
              arr_object.push(res.data.rdObject)
              arr_object.push(res.data.qaObject)
              var hash = {}
              that.options = arr_object.reduce(function(item, next) {
                hash[next.idap] ? '' : hash[next.idap] = true && item.push(next)
                return item
              }, [])
            }, 100)
          })
          break
        case 4: // 新建任务（项目详情）
          this.tit = '新建任务'
          var url1 = window.location.href // 获取url中"?"符后的字串
          this.requireId = url1.split('/')
          var ss = {}
          configShowRequirementVersionEnum('').then(res => {
            res.data.belongingRequire.map(item => {
              item.code === Number(this.requireId[7]) ? ss = item : ''
            })
            this.dialogFormVisible = true
            var that = this
            setTimeout(function() {
              that.task_form = {}
              that.ascription_demand = true
              that.ascription_project = false
              that.$set(that.task_form, 'source', 2)
              that.$set(that.task_form, 'notest', 0)
              that.$set(that.task_form, 'followVersion', 2)
              that.$set(that.task_form, 'requireId', ss.code)
              that.$set(that.task_form, 'projectId', '')
              that.task_form.followVersion === 2 ? that.show_Client = false : ''
            }, 300)
          })
          break
      }
      projectList({ curIndex: 1, pageSize: 15 }).then(res => { // 获取项目（查询）
        this.projectList = res.data
      })
      configShowRequirementVersionEnum('').then(res => {
        // 获取需求（查询）
        this.demandList = res.data.belongingRequire
      })
    },
    test2(item, e) { // 获取团队人员信息
      if (typeof this.test[item.idap] === 'undefined') {
        item.role = e
        this.test[item.idap] = item
      }
      return item.idap
    },
    create_task(e) { // 创建任务（保存）
      this.$refs['task_form'].validate((valid) => {
        if (valid) {
          var taskInfoDO = e
          taskInfoDO.followVersion = e.followVersion
          taskInfoDO.notest = e.notest
          taskInfoDO.source = e.source
          switch (taskInfoDO.source) {
            case 1: // 无归属
              taskInfoDO.requireId = '-1'
              taskInfoDO.projectId = '-1'
              break
            case 2: // 需求
              taskInfoDO.requireId = e.requireId
              taskInfoDO.projectId = ''
              break
            case 3: // 项目
              taskInfoDO.requireId = '-1'
              taskInfoDO.projectId = e.projectId
              break
          }
          if (e.cliType) {
            e.cliType !== '' ? taskInfoDO.bizId = e.cliType[0] : taskInfoDO.bizId = null
            e.cliType !== '' ? taskInfoDO.type = e.cliType[1] : taskInfoDO.type = null
            e.cliType !== '' ? taskInfoDO.clientType = e.cliType[2] : taskInfoDO.clientType = null
          }
          var user = { name: this.userNames, ename: this.userInformation, id: '' }
          taskCreate({ taskInfoDO, user }).then(res => {
            this.dialogFormVisible = false
            this.$message({ message: res.msg, type: 'success', duration: 1000, offset: 150 })
            this.$router.push({ name: '任务详情', query: { id: res.data.id }})
          })
        }
      })
    },
    uptate_task(e) { // 编辑任务（编辑）
      this.$refs['task_form'].validate((valid) => {
        if (valid) {
          var taskInfoDO = e
          taskInfoDO.followVersion = e.followVersion
          taskInfoDO.source = e.source
          taskInfoDO.notest = e.notest
          taskInfoDO.bizId = e.cliType[0]
          taskInfoDO.type = e.cliType[1]
          taskInfoDO.clientType = e.cliType[2]
          var user = { name: this.userNames, ename: this.userInformation, id: '' }
          taskUpdate({ taskInfoDO, user }).then(res => {
            if (res.code === 200) {
              this.dialogFormVisible = false
              this.$message({ message: res.msg, type: 'success', duration: 1000, offset: 150 })
              location.reload()
            }
          })
        }
      })
    },
    remoteMethod(query) { // 人员查询
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          memberQueryMemberInfoByIDAPorName({ memberIDAP: query }).then(res => {
            const obj = {}
            this.options = res.data.reduce((cur, next) => {
              obj[next.idap] ? '' : obj[next.idap] = true && cur.push(next)
              return cur
            }, [])
          })
        }, 200)
      } else {
        this.options = []
      }
    },
    get_source(e) {
      switch (e) {
        case 1:
          this.ascription_demand = false
          this.ascription_project = false
          this.$set(this.task_form, 'requireId', '')
          this.$set(this.task_form, 'projectId', '')
          break
        case 2:
          this.ascription_demand = true
          this.ascription_project = false
          this.$set(this.task_form, 'requireId', '')
          break
        case 3:
          this.ascription_demand = false
          this.ascription_project = true
          this.$set(this.task_form, 'projectId', '')
          break
      }
    },
    get_taskSelect() { // 下拉菜单数据
      configShowTaskEnum().then(res => {
        this.noTest = res.data.noTest // 是否免测
        this.taskSource = res.data.taskSource // 归属需求
        this.appClient = res.data.appClient // 涉及客户端
      })
      settingGetTypeMap().then(res => {
        this.business_platform_Modular = res.data.map(item => ({
          ...item,
          value: item.code,
          label: item.name,
          children: item.child === null ? '' : item.child.map(item1 => ({
            ...item1,
            value: item1.code,
            label: item1.name,
            children: item1.child === null ? '' : item1.child.map(item2 => ({
              ...item2,
              value: item2.code,
              label: item2.name
            }))
          }))
        }))
        this.BusinessLine = res.data // 业务线
        this.BusinessLine.map(item => {
          item.child !== null ? item.child.map(value => {
            this.arr_platform.push(value) // 平台数据
            value.child.map(num => {
              this.arr_Modular.push(num) // 模块数据
            })
          }) : ''
        })
      })
    },
    get_followVersion(e) { // 涉及的客户端（显示/隐藏）
      this.$set(this.task_form, 'involveApp', '')
      e === 1 ? this.show_Client = true : ''
      e === 2 ? this.show_Client = false : ''
    }
  }
}

</script>
<style lang="stylus">
.el-dialog__header {
    padding: 0px 0px 0px;
}
</style>