编辑标签样式

src/views/followupentry/followaudit.vue

@@ -4,14 +4,17 @@
     <div class="audit-detail_header p-24">
       <div class="left">
         <span>当前审核</span>
-        <span class="f-b">【{{unionName}}】【剩余{{mcCount}}】</span>
+        <span class="f-b">【{{ unionName }}】【剩余{{ mcCount }}】</span>
       </div>
       <div class="right">
         <el-button class="btn" @click="$router.go(-1)">返回</el-button>
       </div>
     </div>
     <div class="table-content p-24">
-      <follow-review :formDataList="formEdit" :tabActive="tabActive"></follow-review>
+      <follow-review
+        :formDataList="formEdit"
+        :tabActive="tabActive"
+      ></follow-review>
     </div>
     <div class="choose-handle p-24">
       <span v-if="!editStatus">请选择审核结果:</span>
@@ -22,8 +25,9 @@
           type="primary"
           class="p-btn"
           size="medium"
-          @click="showDialog(item.value,index)"
-        >{{ item.text }}</el-button>
+          @click="showDialog(item.value, index)"
+          >{{ item.text }}</el-button
+        >
         <span v-if="editStatus" class="op">驳回修改建议:胃镜图片不合规</span>
       </div>
     </div>
@@ -34,20 +38,26 @@
         <div class="content">
           <div class="showTips">
             该病例已经审核【驳回修改】，需要改为{{
-            btnGroup[curBtn - 1] ? btnGroup[curBtn - 1].text : ""
+              btnGroup[curBtn - 1] ? btnGroup[curBtn - 1].text : ""
             }}吗
           </div>
         </div>
         <div class="btn">
-          <el-button type="primary" :loading="loading" @click="onCancel">否</el-button>
-          <el-button type="primary" :loading="loading" @click="editSubmit">是</el-button>
+          <el-button type="primary" :loading="loading" @click="onCancel"
+            >否</el-button
+          >
+          <el-button type="primary" :loading="loading" @click="editSubmit"
+            >是</el-button
+          >
         </div>
       </template>
     </public-dialog>
     <public-dialog ref="publicDialog" @onSubmit="onSubmit" @onCancel="onCancel">
       <!-- 审核结果回显 -->
       <template v-if="!confirmStatus" slot="content">
-        <div class="title">{{ btnGroup[curBtn - 1] ? btnGroup[curBtn - 1].text : "" }}</div>
+        <div class="title">
+          {{ btnGroup[curBtn - 1] ? btnGroup[curBtn - 1].text : "" }}
+        </div>
         <div class="content">
           <div v-if="curBtn != 1" class="noPass">
             <el-form
@@ -58,7 +68,10 @@
               label-width="100px"
               class="demo-ruleForm"
             >
-              <el-form-item :label="curBtn == 2 ? '不合格原因' : '驳回修改建议'" prop="reason">
+              <el-form-item
+                :label="curBtn == 2 ? '不合格原因' : '驳回修改建议'"
+                prop="reason"
+              >
                 <el-input
                   v-model="form.reason"
                   type="textarea"
@@ -72,19 +85,21 @@
             <div class="tag-form">
               <el-tag
                 :key="index"
-                v-for="(item,index) in tagList"
+                v-for="(item, index) in tagList"
                 size="medium"
-                :class="item.isSelect ? '':'unselect-tag'"
-                @click="seleckTag(item,index)"
+                :class="item.isSelect ? '' : 'unselect-tag'"
+                @click="seleckTag(item, index)"
               >
-                <span>{{item.text}}</span>
+                <span>{{ item.text }}</span>
               </el-tag>
               <p class="handle-row" @click="handleEdit">编辑标签</p>
             </div>
           </div>
         </div>
         <div class="btn">
-          <el-button type="primary" :loading="loading" @click="onSubmit">确 定</el-button>
+          <el-button type="primary" :loading="loading" @click="onSubmit"
+            >确 定</el-button
+          >
         </div>
       </template>
       <!-- 提交后结果 -->
@@ -94,32 +109,58 @@
           <div v-if="curBtn == 1" class="pass">该病例审核合格成功！</div>
           <div v-if="curBtn != 1" class="noPass">
             <!-- 不合格和驳回 -->
-            <div class="label">{{ curBtn == 2 ? "不合格原因" : "驳回修改建议" }}</div>
+            <div class="label">
+              {{ curBtn == 2 ? "不合格原因" : "驳回修改建议" }}
+            </div>
             <div class="reason">{{ form.reason }}</div>
           </div>
         </div>
-        <div v-if="curBtn != 1" class="showTips">该病例审核{{ curBtn == 2 ? "不合格原因" : "驳回修改建议" }}提交成功！</div>
+        <div v-if="curBtn != 1" class="showTips">
+          该病例审核{{ curBtn == 2 ? "不合格原因" : "驳回修改建议" }}提交成功！
+        </div>
         <div class="btn">
-          <el-button type="primary" @click="nextExample" :loading="auditLoading">
-            <span v-if="tabActive < this.formEdit.length - 1">确认并进入下一列审核</span>
+          <el-button
+            type="primary"
+            @click="nextExample"
+            :loading="auditLoading"
+          >
+            <span v-if="tabActive < this.formEdit.length - 1"
+              >确认并进入下一列审核</span
+            >
             <span v-else>确 定</span>
           </el-button>
         </div>
       </template>
     </public-dialog>
     <!-- 标签操作 -->
-    <public-dialog ref="noteDialog" @onSubmit="onSubmit" @onCancel="onCancel">
+    <public-dialog
+      ref="noteDialog"
+      @onSubmit="onSubmit"
+      @onCancel="onCancel"
+      class="note-dialog"
+    >
       <template v-if="!confirmStatus" slot="content">
         <div class="title">编辑标签</div>
-        <el-tag
-          :key="index"
-          v-for="(item,index) in tagList"
-          size="medium"
-          :class="item.isSelect ? '':'unselect-tag'"
-          @click="seleckTag(item,index)"
-        >
-          <span>{{item.text}}</span>
-        </el-tag>
+        <div class="content">
+          <el-row :key="index" v-for="(item, index) in tagList" class="mb-16">
+            <el-col span="18">
+              <el-input
+                size="medium"
+                v-model="item.text"
+                class="tag-input"
+                :class="item.isSelect ? '' : 'unselect-tag'"
+                @click="seleckTag(item, index)"
+              >
+              </el-input>
+            </el-col>
+            <el-col span="3">
+              <span class="handle-text" style="color: #E02020;">删除</span>
+            </el-col>
+            <el-col span="2">
+              <span  class="handle-text" style="color: #4E68FF;" v-if="index == tagList.length - 1">添加</span>
+            </el-col>
+          </el-row>
+        </div>
       </template>
     </public-dialog>
   </div>
@@ -127,41 +168,41 @@
 <script>
 import publicDialog from "./components/publicDialog.vue"
 import followReview from "./components/followReview.vue"
-import { getFollowUnCheckDetail,putFollowCheck  } from "@/api/followup"
-import { getSysCheckNote  } from "@/api/note"
+import { getFollowUnCheckDetail, putFollowCheck } from "@/api/followup"
+import { getSysCheckNote } from "@/api/note"
 export default {
   components: { publicDialog, followReview },
   data() {
     return {
-      mcCount:7,
+      mcCount: 7,
       editStatus: false, //进入的状态是第一次审核还是修改审核,false为第一次,true为修改
-      tabActive:'0', //当前随访病例
-      formEdit:[
+      tabActive: "0", //当前随访病例
+      formEdit: [
         {
-            "patientId": "1623190906909835266",
-            "id": "1623216842623492098",
-            "formRecordId": "1623216842522828802",
-            "age": "",
-            "name": "",
-            "checkStatus": 1,
-            "patientFrom": 1,
-            "unionName": "合肥高新附院",
-            "unionId": "2",
-            "reportTime": "",
-            "riskRank": "",
-            "formId": "1598197066503389185"
+          patientId: "1623190906909835266",
+          id: "1623216842623492098",
+          formRecordId: "1623216842522828802",
+          age: "",
+          name: "",
+          checkStatus: 1,
+          patientFrom: 1,
+          unionName: "合肥高新附院",
+          unionId: "2",
+          reportTime: "",
+          riskRank: "",
+          formId: "1598197066503389185",
         },
         {
-          name:"djksh",
-          contact_phone:"12345678",
-          is_accept:"0",
-          gas_exam:"15",
-          G_17:"6"
+          name: "djksh",
+          contact_phone: "12345678",
+          is_accept: "0",
+          gas_exam: "15",
+          G_17: "6",
         },
-      ],//填报数据
-      auditLoading:false,
+      ], //填报数据
+      auditLoading: false,
       form: {
-        reason:''
+        reason: "",
       }, //审核表单
       rules: {
         reason: [{ required: true, message: "请填写", trigger: "blur" }],
@@ -184,45 +225,45 @@ export default {
       curBtn: 0, //点击的按钮
       curComponent: "followReview",
       confirmStatus: false,
-      tagList:[
+      tagList: [
         {
-          text:"不合格原因",
-          isSelect:false
+          text: "不合格原因",
+          isSelect: false,
         },
         {
-          text:"不合格原因不合格原因"
+          text: "不合格原因不合格原因",
         },
         {
-          text:"不合格原因"
+          text: "不合格原因",
         },
         {
-          text:"不合格原因"
+          text: "不合格原因",
         },
         {
-          text:"不合格原因"
+          text: "不合格原因",
         },
-      ]
+      ],
     }
   },
   watch: {},
   created() {
     this.getDetail()
   },
-  computed:{
-    unionId(){
+  computed: {
+    unionId() {
       return this.$route.query.unionId
     },
-    unionName(){
-      return this.$route.query.unionName || '--'
-    }
+    unionName() {
+      return this.$route.query.unionName || "--"
+    },
   },
   methods: {
-    handleEdit(){
-this.$refs.noteDialog.dialogVisible = true
+    handleEdit() {
+      this.$refs.noteDialog.dialogVisible = true
     },
-    showDialog(val,index) {
-      console.log("显示框",val)
-      this.curBtn = index+1
+    showDialog(val, index) {
+      console.log("显示框", val)
+      this.curBtn = index + 1
       if (!this.editStatus) {
         if (this.curBtn == 1) {
           // 走接口，保存合格
@@ -284,31 +325,31 @@ this.$refs.noteDialog.dialogVisible = true
       this.$refs.publicDialog.dialogVisible = true
     },
     nextExample() {
-      if(Number(this.tabActive) < this.formEdit.length - 1){
-        this.tabActive=String(Number(this.tabActive) + 1)
+      if (Number(this.tabActive) < this.formEdit.length - 1) {
+        this.tabActive = String(Number(this.tabActive) + 1)
       }
-      console.log('tab激活',this.tabActive)
+      console.log("tab激活", this.tabActive)
       this.onCancel()
     },
     //随访数据
-    async getDetail(){
+    async getDetail() {
       this.loading = true
       let res = await getFollowUnCheckDetail(this.unionId)
-      if(res.code==1){
+      if (res.code == 1) {
         // this.formEdit=res.data //调试注释
       }
       this.loading = false
     },
     //审核
-    async handleCheck(){
+    async handleCheck() {
       this.auditLoading = true
-      let params={
-        id: this.formEdit[this.tabActive], 
-        checkStatus: this.btnGroup[this.curBtn].value, 
-        checkNote: this.form.reason, 
-        patientId: this.unionId
+      let params = {
+        id: this.formEdit[this.tabActive],
+        checkStatus: this.btnGroup[this.curBtn].value,
+        checkNote: this.form.reason,
+        patientId: this.unionId,
       }
-      console.log('审核值',params)
+      console.log("审核值", params)
       // let res = await putFollowCheck(params)
       // if(res.code==1){
       //   // this.formEdit=res.data //调试注释
@@ -316,20 +357,20 @@ this.$refs.noteDialog.dialogVisible = true
       this.auditLoading = false
     },
     // 审核标签
-    async getSysCheckNote(){
+    async getSysCheckNote() {
       this.loading = true
       let res = await getSysCheckNote()
-      if(res.code==1){
+      if (res.code == 1) {
         // this.formEdit=res.data //调试注释
       }
       this.loading = false
     },
     //选择标签
-    seleckTag(item,index){
-      this.tagList[index]['isSelect']=true
-      this.form.reason = this.form.reason+item.text
-      this.$forceUpdate();
-    }
+    seleckTag(item, index) {
+      this.tagList[index]["isSelect"] = true
+      this.form.reason = this.form.reason + item.text
+      this.$forceUpdate()
+    },
   },
 }
 </script>
@@ -392,7 +433,7 @@ this.$refs.noteDialog.dialogVisible = true
   line-height: 26px;
 }
 .content {
-  margin: 28px 48px;
+  margin: 28px 23px;
   .pass {
     font-size: 18px;
     font-family: AlibabaPuHuiTiM;
@@ -448,4 +489,18 @@ this.$refs.noteDialog.dialogVisible = true
     cursor: pointer;
   }
 }
+.note-dialog {
+  ::v-deep {
+    .tag-input {
+      .el-input__inner {
+        background-color: rgba(78, 104, 255, 0.06);
+        border-radius: 2px;
+      }
+    }
+    .handle-text{
+      line-height: 36px;
+      cursor: pointer;
+    }
+  }
+}
 </style>