专利挖掘项目审核

src/views/components/examine/examine.vue

@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <el-dialog
+      :title="title"
+      :visible.sync="dialogVisible"
+      width="600px"
+      :before-close="handleClose"
+      :close-on-click-modal="false"
+    >
+      <el-form
+        :model="form"
+        status-icon
+        :rules="rules"
+        ref="form"
+        label-width="120px"
+        class="demo-ruleForm"
+      >
+        <el-form-item label="审核人：" prop="name">
+
+          <el-select style="width:100%;" ref="select1" v-model="form.select1" clearable filterable remote placeholder="请输入审核人" >
+              <el-option v-for="item in personnelList" :key="item.value" :label="item.label" :value="item.value" :disabled="!item.value">
+                <span style="float: left" >{{ item.label }}</span>
+                <span style="float: right; color: #8492a6; font-size: 13px;" v-if="!item.value"><el-button size="small" >创建</el-button></span>
+              </el-option>
+            </el-select>
+        </el-form-item>
+        <el-form-item label="抄送人：">
+          <el-select
+            multiple
+            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-form-item label="截止时间：">
+          <el-date-picker
+            style="width: 100%"
+            v-model="form.endTime"
+            type="datetime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="请选择截止日期时间"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="审核备注：">
+          <el-input
+            type="textarea"
+            :rows="3"
+            placeholder="请输入内容"
+            v-model="form.remark"
+          ></el-input>
+        </el-form-item>
+      </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 {
+  data() {
+    return {
+      title: "",
+      dialogVisible: false,
+      form: {},
+      rules: {
+        name: [
+          { required: true, message: "请输入项目审核人", trigger: "blur" },
+        ],
+      },
+      options: [],
+      checked: [],
+      queryParams: {},
+      personnelList: [],
+    };
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    // 远程搜索
+    remoteMethod(query) { },
+    change() { },
+    // 打开或关闭下拉时触发
+    visibleChange(){},
+    open() {
+      this.title = "项目审核";
+      this.dialogVisible = true;
+    },
+    getList() {
+    //   // this.queryParams.tenant = this.userinfo.tenantId
+      this.$api.getAllPersonnel()
+        .then((response) => {
+          let allPersonnelList = response.data;
+          this.personnelList = allPersonnelList.map(item => {
+            return { value: `${item.id}`, label: `${item.personnelName}<${item.personnelEmail}>` };
+          });
+        })
+    },
+    //
+    submit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.handleClose();
+        } else {
+          this.$message.error("信息未输入完整");
+        }
+      });
+    },
+    // 关闭
+    handleClose() {
+      this.$refs.form.resetFields();
+      this.form = {};
+      this.dialogVisible = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/components/myFileList/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="myFileList">
+    <ul class="formUl">
+      <li
+        v-for="item in fileList"
+        :key="item.name"
+        @click="handlePreview(item)"
+        class="itemLi"
+      >
+        <div>
+          <i class="el-icon-document icon1"></i>
+          <span>{{ item.name }}</span>
+        </div>
+        <i v-if="item.id" class="el-icon-circle-check icon3"></i>
+        <i @click.stop="handleRemove(item)" class="el-icon-close icon2"></i>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    fileList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  mounted() {},
+  methods: {
+    // 点击已上传文件
+    handlePreview(file) {
+      this.$emit("preview", file);
+    },
+    // 删除文件
+    handleRemove(file) {
+      this.$emit("remove", file);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.myFileList {
+  .formUl {
+    max-height: 176px;
+    overflow: auto;
+    list-style: none;
+    padding: 0px;
+    margin: 0px;
+    .itemLi {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 5px;
+      .icon1 {
+        margin-right: 5px;
+      }
+    }
+    .itemLi:hover {
+      background: #e9e9e9;
+      cursor: pointer;
+      .icon2 {
+        display: inline;
+      }
+      .icon3 {
+        display: none;
+      }
+    }
+    .icon2 {
+      display: none;
+    }
+    .icon3 {
+      display: inline;
+      color: green;
+    }
+  }
+}
+</style>

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

@@ -1,27 +1,49 @@
 <template>
-  <div>
-    <el-dialog :title="title" :visible.sync="dialogVisible" width="800" :before-close="handleClose">
-      <el-form :model="form" status-icon :rules="rules" ref="form" label-width="120px" class="demo-ruleForm">
+  <div class="addAndEditProject">
+    <el-dialog
+      :title="title"
+      :visible.sync="dialogVisible"
+      width="700px"
+      :before-close="handleClose"
+      :close-on-click-modal="false"
+    >
+      <el-form
+        :model="form"
+        status-icon
+        :rules="rules"
+        ref="form"
+        label-width="120px"
+        class="demo-ruleForm"
+      >
         <el-row>
           <el-col :span="12">
             <el-form-item label="项目名称：" prop="name">
-              <el-input v-model="form.name" placeholder="请输入项目名称"></el-input>
+              <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-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.name" placeholder="请输入产品阶段"></el-input>
+              <el-input
+                v-model="form.name"
+                placeholder="请输入产品阶段"
+              ></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="产出：">
+            <el-form-item label="项目产出：">
               <el-input v-model="form.type" placeholder="请输入产出"></el-input>
             </el-form-item>
           </el-col>
@@ -29,28 +51,52 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="相关竞争对手：">
-              <el-input v-model="form.name" placeholder="请输入相关竞争对手"></el-input>
+              <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-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-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-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-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-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>
@@ -59,59 +105,51 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="是否检索：">
-              <el-switch v-model="form.delivery" 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.delivery2" active-color="#13ce66" inactive-color="#ff4949">
+              <el-switch
+                v-model="form.delivery"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+              >
               </el-switch>
             </el-form-item>
           </el-col>
         </el-row>
-        <template v-if="form.delivery2">
-          <el-row >
-            <el-col :span="12">
-              <el-form-item label="审核人：">
-                <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-date-picker style="width: 100%" v-model="form.endTime" type="datetime"
-                  value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择截止日期时间">
-                </el-date-picker>
-              </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>
-        </template>
         <el-row>
-          <el-col :span="24">
+          <el-col :span="12">
             <el-form-item label="附件：">
-              <el-upload ref="upload" class="upload-file" drag action="#" :auto-upload="false" :show-file-list="true"
-                :on-change="onChange" :on-remove="handleRemove" :on-preview="handlePreview">
+              <el-upload
+                ref="upload"
+                class="upload-file"
+                drag
+                action="#"
+                multiple
+                :auto-upload="false"
+                :show-file-list="false"
+                :on-change="onChange"
+              >
                 <i :class="fileList.length != 0 ? 'el-icon-upload' : 'el-icon-refresh'"></i>
-                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                <div class="el-upload__text">
+                  将文件拖到此处，或<em>点击上传</em>
+                </div>
                 <div class="el-upload__tip" slot="tip"></div>
               </el-upload>
             </el-form-item>
           </el-col>
+          <el-col :span="12">
+            <el-form-item label="附件列表：">
+              <myFileList :fileList="fileList" @preview="handlePreview" @remove="handleRemove"></myFileList>
+            </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-input
+                type="textarea"
+                :rows="3"
+                placeholder="请输入内容"
+                v-model="form.remark"
+              ></el-input>
             </el-form-item>
           </el-col>
         </el-row>
@@ -119,67 +157,145 @@
       <span slot="footer" class="dialog-footer">
         <el-button @click="handleClose">取 消</el-button>
         <el-button type="primary" @click="submit">确 定</el-button>
+        <el-button type="primary" @click="sure">审 核</el-button>
       </span>
     </el-dialog>
 
+    <Examine ref="Examine"></Examine>
   </div>
 </template>
 
 <script>
+import myFileList from '../../../components/myFileList/index.vue'
+import Examine from '../../../components/examine/examine.vue'
 export default {
-  components: {},
+  components: {
+    myFileList,
+    Examine,
+  },
   props: {},
   data() {
     return {
       dialogVisible: false,
-      title: '',
+      title: "",
       form: {},
       rules: {
-        name: [{ required: true, message: '请输入项目名称', trigger: 'blur' },],
+        name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
       },
-      options: [],//负责人数组
-      value: '',//负责人
-      fileList: []//文件数组
+      options: [], //负责人数组
+      value: "", //负责人
+      fileList: [
+        { name: 'food.jpeg',
+          id:1, 
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        },
+        {
+          name: "food2.jpeg",
+          id:2,
+          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
+        },
+      ], //文件数组
+      allReady:[],
     };
   },
   watch: {},
   computed: {},
-  created() { },
-  mounted() { },
+  created() {},
+  mounted() {},
   methods: {
-    onChange(file, fileList) { },
-    handlePreview(file, fileList) { },
-    handleRemove(file, fileList) { },
+    // 文件改变的事件
+    onChange(file, fileList) {
+      // 判断文件是否重复
+      if (this.fileList) {
+        let index=this.fileList.findIndex(item=>{
+          return item.name == file.name
+        })
+        if (index != -1) {
+          this.allReady.push(file.name)
+          let lastIndex=fileList.findLastIndex(itemLast=>{
+            return itemLast.name == file.name
+          })
+          if (lastIndex !=-1) {
+            fileList.splice(lastIndex,1)
+          }
+        } else {
+          this.fileList.push(file.raw)
+        }
+      }
+      this.$nextTick(()=>{
+        if (this.allReady.length>0) {
+          var a=''
+          this.allReady.forEach(item=>{
+            a += item + '，'
+          })
+          this.$alert(a +'文件重复，请勿再次上传', '提示', {
+            confirmButtonText: '确定',
+            type:'warning',
+            callback: action => {
+              this.allReady = []
+            }
+          });
+        }
+      })
+      
+      console.log(file, fileList,this.fileList);
+    },
+    // 点击上传的文件事件
+    handlePreview(file) {
+      console.log(file);
+    },
+    // 删除文件事件
+    handleRemove(file) {
+      var index = null
+      if (file.hasOwnProperty('id')) {
+        index = this.fileList.findIndex(item => item.id == file.id);  
+      } else {
+        index = this.fileList.findIndex(item => item.uid == file.uid);  
+      }
+      if (index !== -1) {  
+        this.fileList.splice(index, 1);  
+      }  
+    },
     //打开弹窗
     open(form) {
-      this.form = JSON.parse(JSON.stringify(form))
+      this.form = JSON.parse(JSON.stringify(form));
       if (this.form.id) {
-        this.title = '编辑专利挖掘项目'
+        this.title = "编辑专利挖掘项目";
       } else {
-        this.title = '新增专利挖掘项目'
+        this.title = "新增专利挖掘项目";
       }
-      this.dialogVisible = true
+      this.dialogVisible = true;
     },
     //关闭弹窗
     handleClose() {
-      this.$refs.upload.clearFiles()
-      this.$refs.form.resetFields()
-      this.form = {}
-      this.dialogVisible = false
+      this.$refs.upload.clearFiles();
+      this.$refs.form.resetFields();
+      this.form = {};
+      this.dialogVisible = false;
     },
     //提交数据
     submit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
-          this.handleClose()
+          this.handleClose();
         } else {
-          this.$message.error('信息未输入完整')
+          this.$message.error("信息未输入完整");
         }
       });
-      
-    }
+    },
+    // 审核
+    sure(){
+      this.$refs.Examine.open()
+    },
   },
-
 };
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss">
+.addAndEditProject {
+  
+}
+</style>
+<style lang="scss" scoped>
+.addAndEditProject {
+  
+}</style>