2023-3-29

src/views/recruitment/component/addRecruit.vue

@@ -221,7 +221,7 @@ export default {
                           ></el-date-picker>
                         );
                       case 3:
-                        let options = item.remark.split(",")
+                        let options = Array.from(new Set(item.remark.split(",")))
                         return (
                           <el-select
                             v-model={this.form[item.en]}

src/views/recruitment/component/setting.vue

@@ -97,6 +97,8 @@ export default {
   },
   data() {
     return {
+      inputVisible: false,
+      inputValue: "",
       flag: ["年份", "姓名", "身份证号", "考生号", "准考证号"],
       visiblePopover: false,
       popIndex: "",
@@ -197,13 +199,87 @@ export default {
           minWidth: 240,
           align: "left",
           customFn: (row) => {
-            return (
-              <el-input
-                size="mini"
-                disabled={this.flag.indexOf(row.name) !== -1}
-                v-model={row.remark}
-              ></el-input>
-            );
+            if(row.type === 3){
+              return (
+                <div>
+                  {
+                    row.remark ? Array.from(new Set(row.remark.split(','))).map((item) => {
+                      return (
+                        <el-tag key={item}
+                                closable={true}
+                                on={{
+                                  ['close']:e => {
+                                    if(row.remark.length === 0){
+                                      return
+                                    }
+                                    if(row.remark.indexOf(item) === 0){
+                                      row.remark = row.remark.slice(item.length + 1)
+                                    }else{
+                                      let temp = String(row.remark)
+                                      row.remark = temp.slice(0, row.remark.indexOf(item) - 1) + temp.slice(row.remark.indexOf(item) + item.length)
+                                    }
+                                  }
+                                }}>{item}</el-tag>
+                      )
+                    }) : ''
+                  }
+                  {
+                    this.inputVisible ? (
+                      <el-input
+                        v-model={this.inputValue}
+                        ref="saveTagInput"
+                        size="small"
+                        style="width: 120px;margin-left: 4px;"
+                        nativeOnKeyup={
+                          (e) => {
+                            e.preventDefault()
+                            if(!this.inputValue){
+                              return
+                            }
+                            if (e.keyCode === 13) {
+                              row.remark += row.remark ? `,${this.inputValue}` : this.inputValue
+                              this.inputVisible = false
+                              this.inputValue = ""
+                            }
+                          }
+                        }
+                        on={{
+                          ['blur']:e => {
+                            if(!this.inputValue){
+                              return
+                            }
+                            row.remark += row.remark ? `,${this.inputValue}` : this.inputValue
+                            this.inputVisible = false
+                            this.inputValue = ""
+                          }
+                        }}
+                      ></el-input>
+                    ) : (
+                      <el-button class="button-new-tag"
+                                 size="small"
+                                 style="margin-left: 4px;"
+                                 on={{
+                                   ['click']:e => {
+                                     this.inputVisible = true;
+                                     this.$nextTick(_ => {
+                                       this.$refs.saveTagInput.$refs.input.focus();
+                                     });
+                                   }
+                                 }}>新增</el-button>
+                    )
+                  }
+                </div>
+              )
+            }else{
+              return (
+                <el-input
+                  size="mini"
+                  disabled={this.flag.indexOf(row.name) !== -1}
+                  v-model={row.remark}
+                ></el-input>
+              );
+            }
+
           },
         },
         {
@@ -356,3 +432,8 @@ export default {
 </script>
 
 <style scoped lang="scss"></style>
+<style>
+.el-tag + .el-tag {
+  margin-left: 4px;
+}
+</style>