xiaoshi_system/src/views/patentMining/components/dialog/handleTask1.vue

<template>
  <!-- 处理挖掘任务1（项目审核任务弹窗） -->
  <div class="handleTask1">
    <el-dialog :title="title" :visible.sync="dialogVisible" width="800px" :before-close="handleClose"
      :close-on-click-modal="false">
      <el-form :model="form" status-icon :rules="rules" ref="form" label-width="120px" class="demo-ruleForm"
        :disabled="!form.isLook">
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目名称：" prop="name">
              <el-input v-model="form.name" placeholder="请输入项目名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="技术方向：">
              <el-input v-model="form.technicalDirection" placeholder="请输入技术方向"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品阶段：">
              <el-input v-model="form.productPhase" placeholder="请输入产品阶段"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品产出：">
              <el-input v-model="form.output" placeholder="请输入产品产出"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="相关竞争对手：">
              <el-input v-model="form.relatedCompetitors" placeholder="请输入相关竞争对手"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="技术关键词：">
              <el-input v-model="form.technicalKeyword" placeholder="请输入技术关键词"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="参与人：">
              <div class="manage">
                <el-button size="small" @click="showDialog()">选择</el-button>
                <div v-html="getNames(form.involvedPersons)">

                </div>
              </div>
              <!-- <el-input v-model="form.involvedPersons" placeholder="请输入参与人"></el-input> -->
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="负责人：">
              <el-select v-model="form.headId" placeholder="请选择负责人" style="width: 100%;" filterable remote
                :remote-method="remoteMethodPerson" v-SelectLazyLoading="lazyLoadingPerson"
                :loading="personnelList.loading">
                <el-option v-for="item in personnelList.data" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
              <!-- <el-select v-model="form.value" placeholder="请选择负责人" style="width: 100%;">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否检索：">
              <el-switch v-model="form.ifSearch" active-color="#13ce66" inactive-color="#ff4949">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="附件：">
              <myUpload :file-list="form.systemFileList" @on-change="onchangeFile" @on-remove="onRemove"
                @on-preview="onPreview" style="height: 180px;" :autoUpload="true"></myUpload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注：">
              <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.description"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-dropdown v-if="form.isLook" split-button type="primary" @click="submit">
          <span>{{ btn.label }}</span>
          <el-dropdown-menu slot="dropdown" class="text-align_center">
            <el-dropdown-item v-for="item in btnObj" :key="item.label" @click.native="onChangeFamily(item)">{{ item.label
            }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </span>
    </el-dialog>

    <choosePerson ref="choosePerson" @getPersonIds="getPersonIds"></choosePerson>

  </div>
</template>

<script>
import { personnelLoading } from '../mixins/index2'
import choosePerson from '@/views/components/dialog/person.vue'
export default {
  mixins: [personnelLoading],
  components: {
    choosePerson,
  },
  props: {},
  data() {
    return {
      dialogVisible: false,
      title: '',
      form: {
        systemFileList: [],
      },
      rules: {
        name: [{ required: true, message: '请输入项目名称', trigger: 'blur' },],
      },
      btnObj: [
        {
          label: '同意创建',
          value: 1
        },
        {
          label: '取消创建',
          value: 4
        },
        {
          label: '缺少材料',
          value: 5
        }
      ],
      btn: {
        label: '同意创建',
        value: 1
      },
      options: [],
      fileList: [],
    };
  },
  watch: {},
  computed: {},
  created() { },
  mounted() { },
  methods: {
    // 打开参与人 人员弹窗
    showDialog() {
      this.$refs.choosePerson.open(this.form.involvedPersonsIds, this.form.involvedPersons)
    },
    //获取参与人员信息
    getPersonIds({ personIds, persons }) {
      if (personIds.length > 0) {
        // adminPersons存储返回的人员id数组
        this.$set(this.form, 'involvedPersons', persons)
        this.$set(this.form, 'involvedPersonsIds', personIds)
      } else {
        this.$set(this.form, 'involvedPersons', [])
        this.$set(this.form, 'involvedPersonsIds', [])
      }
    },
    // 处理参与人数据
    getNames(row) {
      if (!row) {
        return ''
      }
      var arr = row.map(item => {
        return item.name
      })
      return arr.join('、')
    },
    // 上传的文件监听
    onchangeFile(file, fileList) {
      if (file.guid && this.form.systemFileList && this.form.systemFileList.length > 0) {
        let index = this.form.systemFileList.findIndex(item => {
          return item.uid == file.uid
        })
        if (index != -1) {
          this.form.systemFileList.splice(index, 1, file)
        } else {
          this.form.systemFileList.push(file.raw)
        }
      } else {
        this.form.systemFileList.push(file.raw)
      }
    },
    // 删除上传的文件
    onRemove(file, fileList) {
      let index = this.form.systemFileList.findIndex(item => {
        return item.uid == file.uid
      })
      if (index != -1) {
        this.form.systemFileList.splice(index, 1)
      }
    },
    // 点击文件
    onPreview(file) { },
    // 切换按钮
    onChangeFamily(val) {
      this.btn = val
    },
    //打开弹窗
    async open(form, val) {
      this.form = JSON.parse(JSON.stringify(form))
      // 是否可以处理任务
      this.form.isLook = val
      // 负责人
      if (this.form.headId) {
        this.personnelList.queryParams.id = this.form.headId
        await this.getPermissionPersonnel(1)
        this.personnelList.queryParams.id = null
      }
      // 文件
      if (!this.form.systemFileList) {
        this.$set(this.form, 'systemFileList', [])
      }
      // 参与人
      if (this.form.involvedPersons && this.form.involvedPersons.length > 0) {
        this.form.involvedPersonsIds = []
        this.form.involvedPersonsIds = this.form.involvedPersons.map(item => {
          item.name = item.personName
          return item.personId
        })
      }
      if (this.form.isLook) {
        this.title = '处理任务'
      } else {
        this.title = '查看任务'
      }
      this.getPermissionPersonnel()
      this.dialogVisible = true
    },
    //关闭弹窗
    handleClose() {
      this.form = {
        systemFileList: [],
      }
      this.clear()
      this.dialogVisible = false
    },
    // 清空负责人
    clear() {
      this.personnelList.queryParams.name = null
      this.personnelList.queryParams.current = 1
      this.personnelList.queryParams.data = []
    },
    //提交数据
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 判断文件是否都上传完毕
          if (this.form.systemFileList && this.form.systemFileList.length > 0) {
            this.form.fileGuids = []
            for (let i = 0; i < this.form.systemFileList.length; i++) {
              if (this.form.systemFileList[i].guid) {
                this.form.fileGuids.push(this.form.systemFileList[i].guid)
              } else {
                this.$message.error('文件未全部上传，请耐心等待')
                return false
              }
            }
          }
          this.$api.submit(this.form).then(res => {
            if (res.code == 200) {
              this.$message.success('任务已处理')
              this.handleClose()
            }
          })
        }
      })

    }
  },

};
</script>
<style lang="scss" scoped></style>