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

<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="850" :before-close="handleClose">
      <el-form :model="form" status-icon :rules="rules" ref="form" label-width="120px" class="demo-ruleForm">
        <template>
          <!-- 研发项目 -->
          <el-divider content-position="left">研发项目</el-divider>
          <el-row>
            <el-col :span="12">
              <el-form-item label="研发编号：">
                <el-autocomplete class="inline-input" v-model="form.rdnumber" value-key="name" v-SelectLazyLoading="load"
                  :fetch-suggestions="querySearchQuestion" placeholder="请选择研发项目编号" :trigger-on-focus="false"
                  style="width: 100%;">
                </el-autocomplete>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="研发名称：" prop="rdName">
                <el-input v-model="form.rdName" placeholder="请输入研发项目名称"></el-input>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="产品：" prop="product">
                <el-input v-model="form.product" placeholder="请输入产品名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产品阶段：">
                <el-input v-model="form.productPhase" placeholder="请输入产品阶段"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <el-divider content-position="left">挖掘项目</el-divider>
        <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.type" 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="12">
            <el-form-item label="产出：">
              <el-input v-model="form.output" placeholder="请输入产出"></el-input>
            </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-col :span="12">
            <!-- <el-form-item label="是否审核：">
              <el-switch v-model="form.examine" 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="参与人：">
              <div class="manage">
                <el-button size="small" @click="showDialog(2)">选择</el-button>
                <div v-html="getNames(form.adminPersons)">

                </div>
              </div>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="24">
            <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-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="附件：">
              <myUpload :file-list="form.systemFileList" @on-change="onchange" @on-remove="onRemove"
                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.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      dialogVisible: false,
      title: '',
      form: {},
      rules: {
        name: [{ required: true, message: '请输入项目名称', trigger: 'blur' },],
      },
      options: [],//负责人数组
      value: '',//负责人
      //人员列表懒加载
      personnelList: {
        queryParams: {
          current: 1,
          size: 10
        },
        data: []
      },
      // 研发编号列表懒加载
      rdNumberArr: {
        queryParams: {
          current: 1,
          size: 10,
        },
        eventInput: '',
        data: []
      },
    };
  },
  watch: {},
  computed: {},
  created() { },
  mounted() {
    // 获取人员列表
    this.getPermissionPersonnel();
  },
  methods: {
    // 打开参与人人员弹窗
    showDialog() {
      // this.$refs.choosePerson.open(this.form.adminIds,this.form.adminPersons)
    },
    // 处理参与人数据
    getNames(row){
      if(!row){
        return ''
      }
      var arr = row.map(item=>{
        return item.name
      })
      return arr.join('、')
    },
    // 研发编号懒加载方法
    load() {
      if (this.rdNumberArr.queryParams.current * this.rdNumberArr.queryParams.size >= this.rdNumberArr.queryParams.total) {
        return false
      }
      this.rdNumberArr.queryParams.current++
      this.getRdProjectByNumber()
    },
    // 查询研发编号
    async getRdProjectByNumber() {
      let searchValue = { name: this.rdNumberArr.eventInput }
      let params = {
        ...this.rdNumberArr.queryParams,//分页信息
        searchQuery: this.$commonJS.objectToString(searchValue)//输入的建议
      }
      await this.$api.getRdProjectByNumber(params).then(res => {
        if (res.code == 200) {
          this.rdNumberArr.data.push(...res.data.data)
          this.rdNumberArr.queryParams.total = res.data.total
          this.rdNumberArr.cb(this.rdNumberArr.data);
        }
      })
    },
    //获取下拉建议研发编号数据
    async querySearchQuestion(queryString, cb) {
      this.rdNumberArr.queryParams.current = 1
      this.rdNumberArr.eventInput = queryString
      this.rdNumberArr.data = []
      this.rdNumberArr.cb = cb
      await this.getRdProjectByNumber()
    },
    // 人员列表远程搜索
    remoteMethodPerson(query) {
      this.personnelList.data = []
      this.personnelList.queryParams.current = 1
      this.personnelList.queryParams.name = query
      this.getPermissionPersonnel()
    },
    // 获取所有人员列表懒加载
    lazyLoadingPerson() {
      if (this.personnelList.queryParams.current * this.personnelList.queryParams.size >= this.personnelList.queryParams.total) {
        return false
      }
      this.personnelList.queryParams.current += 1
      this.getPermissionPersonnel()
    },
    //获取所有人员列表（修改不要一次性获取，可以使用懒加载加远程搜索 ）
    getPermissionPersonnel() {
      this.personnelList.loading = true;
      this.$api.getPermissionPersonnel(this.personnelList.queryParams).then((response) => {
        if (response.code == 200) {
          this.personnelList.loading = false;
          this.personnelList.data.push(...response.data)
          this.personnelList.queryParams.total = response.pageColumn.total
        }
      })
    },
    // 上传的文件监听
    onchange(file, fileList) {
      if (file.guid) {
        let index = this.form.systemFileList.findIndex(item => {
          return item.uid == file.uid
        })
        if (index != -1) {
          this.form.systemFileList.splice(index, 1, file)
          this.form.fileGuids.push(file.guid)
        }
      } 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) {
        if (file.guid) {
          let index2 = this.form.fileGuids.findIndex(item => {
            return item == file.guid
          })
          if (index2 != -1) {
            this.form.fileGuids.splice(index, 1)
          }
        }
        this.form.systemFileList.splice(index, 1)
      }
    },
    //打开弹窗
    open(form) {
      if (form && form.id) {
        this.form = JSON.parse(JSON.stringify(form))
        this.title = '编辑专利挖掘项目'
      } else {
        this.title = '新增专利挖掘项目'
      }
      this.dialogVisible = true
    },
    //关闭弹窗
    handleClose() {
      // this.$refs.upload.clearFiles()
      this.$refs.form.resetFields()
      this.form = {}
      this.dialogVisible = false
    },
    //提交数据
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 判断文件是否全部上传完毕
          if ((this.form.fileGuids && this.form.fileGuids.length) != (this.form.systemFileList && this.form.systemFileList.length)) {
            this.$message.error('您有文件未上传完毕，请您稍等片刻')
            return false
          }
          if (!this.form.id) {//新增
            if (this.form.examine) {//审核任务

            } else {//不审核直接创建项目
              this.$api.addPatentDigProject(this.form).then(res => {
                if (res.code == 200) {
                  this.$message.success('新增专利挖掘项目成功')
                  this.$emit('isSuccess', true)
                  this.handleClose()
                }
              })
            }

          } else {//编辑
            this.$api.edit(this.form).then(res => {
              if (res.code == 200) {
                this.$message.success('更新专利挖掘项目成功')
                this.$emit('isSuccess', true)
                this.handleClose()
              }
            })
          }

        } else {
          this.$message.error('信息未输入完整')
        }
      });

    },
    // 审核任务
    examine(data) {
      let params = {

      }
      this.$api.task(params).then(res => {
        if (res.code == 200) {

        }
      })
    },
  },

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