标签更改

src/views/orientedtwo/bqspan/index.vue

@@ -71,12 +71,7 @@
         </el-row>
       </div>
       <div class="table-wrapper">
-        <el-table
+        <el-table v-loading="loading" :data="postList" stripe height="100%">
-          v-loading="loading"
-          :data="postList"
-          stripe
-          height="100%"
-        >
           <el-table-column label="序号" align="center">
             <template slot-scope="scope">
               {{
@@ -91,7 +86,7 @@
             width="200"
           />
           <el-table-column
-            label="统一信用代码"
+            label="统一社会信用代码"
             align="center"
             prop="uscc"
             width="200"
@@ -123,9 +118,15 @@
             fixed="right"
           >
             <template slot-scope="scope">
-              <el-button type="text" @click="getAdd(scope.row, 'detail')"
+              <el-button type="text" @click="getinfo(scope.row, 'detail')"
                 >详情</el-button
               >
+              <el-button
+                type="text"
+                @click="getedit(scope.row, 'detail')"
+                style="color: #67c23a"
+                >编辑</el-button
+              >
               <el-button
                 type="text"
                 @click="handleDelete(scope.row)"
@@ -151,12 +152,18 @@
       :title="dialogTitle"
       :visible.sync="dialogFormVisible"
       width="50%"
+      @close="handleDialogClose"
     >
+      <!-- 在新增/编辑弹窗的el-form中 -->
       <el-form ref="form" :model="form" label-width="200px">
         <el-row>
           <el-col :span="12">
             <el-form-item label="企业名称">
-              <el-input v-model="form.epname" placeholder="请输入企业名称" />
+              <el-input
+                v-model="form.epname"
+                placeholder="请输入企业名称"
+                :disabled="isDetail"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -164,17 +171,18 @@
               <el-input
                 v-model="form.uscc"
                 placeholder="请输入统一社会信用代码"
+                :disabled="isDetail"
               />
             </el-form-item>
           </el-col>
         </el-row>
-
         <el-row>
           <el-col :span="12">
             <el-form-item label="标签代码">
               <el-input
                 v-model="form.catalogueid"
                 placeholder="请输入标签代码"
+                :disabled="isDetail"
               />
             </el-form-item>
           </el-col>
@@ -183,6 +191,7 @@
               <el-input
                 v-model="form.lablenotes"
                 placeholder="请输入标签注释"
+                :disabled="isDetail"
               />
             </el-form-item>
           </el-col>
@@ -191,31 +200,43 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="标签状态">
-              <el-input v-model="form.status" placeholder="请输入标签状态" />
+              <el-input
+                v-model="form.status"
+                placeholder="请输入标签状态"
+                :disabled="isDetail"
+              />
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
-
       <div slot="footer">
         <el-button @click="dialogFormVisible = false">取消</el-button>
-        <el-button type="primary" @click="submitForm">保存</el-button>
+        <el-button type="primary" @click="submitForm">
+          {{ isDetail ? "确定" : "保存" }}
+        </el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { getCybqInformationPage, getSpanById, addCybq, updateSpan,deleteSpan} from "@/api/ManageApi/index";
+import {
+  getCybqInformationPage,
+  getSpanById,
+  addCybq,
+  updateSpan,
+  deleteSpan,
+} from "@/api/ManageApi/index";
 import { checkPermi, checkRole } from "@/utils/permission";
 
 export default {
   dicts: ["xzfl"],
   data() {
     return {
+      isDetail: false,
       // 弹窗相关
       dialogFormVisible: false,
-      dialogTitle: '',
+      dialogTitle: "",
       form: {
         id: null,
         epname: "",
@@ -229,7 +250,7 @@ export default {
         codekey: "",
         sceneid: "",
         status: "",
-        bqbjdw: ""
+        bqbjdw: "",
       },
 
       // 列表相关
@@ -291,15 +312,15 @@ export default {
         codekey: "",
         sceneid: "",
         status: "",
-        bqbjdw: ""
+        bqbjdw: "",
       };
       this.dialogFormVisible = true;
     },
-
+    /** 获取详情 */
-    /** 编辑按钮点击（即“详情”） */
+    getinfo(row) {
-    getAdd(row) {
+      this.dialogTitle = "产业标签详情";
-      this.dialogTitle = "编辑产业标签";
+      getSpanById(row.id)
-      getSpanById(row.id).then(response => {
+        .then((response) => {
           const data = response.data;
           this.form = {
             id: data.id,
@@ -314,40 +335,77 @@ export default {
             codekey: data.codekey,
             sceneid: data.sceneid,
             status: data.status,
-          bqbjdw: data.bqbjdw
+            bqbjdw: data.bqbjdw,
           };
+          // 设置所有表单项为只读
+          this.isDetail = true;
           this.dialogFormVisible = true;
-      }).catch(() => {
+        })
+        .catch(() => {
           this.$message.error("获取数据失败");
         });
     },
+    getedit(row) {
+      this.dialogTitle = "编辑产业标签";
+      getSpanById(row.id)
+        .then((response) => {
+          const data = response.data;
+          this.form = {
+            id: data.id,
+            epname: data.epname,
+            uscc: data.uscc,
+            catalogueid: data.catalogueid,
+            state: data.state,
+            yhlx: data.yhlx,
+            lablenotes: data.lablenotes,
+            status: data.status,
+            dw_timestamp: data.dw_timestamp,
+            codekey: data.codekey,
+            sceneid: data.sceneid,
+            status: data.status,
+            bqbjdw: data.bqbjdw,
+          };
+          this.dialogFormVisible = true;
+        })
+        .catch(() => {
+        });
+    },
 
     /** 提交表单（新增或修改） */
     submitForm() {
+      if (this.isDetail) {
+        this.dialogFormVisible = false;
+        return;
+      }
+
       const apiRequest = this.form.id ? updateSpan : addCybq;
       apiRequest(this.form)
         .then(() => {
-          this.$message.success(this.form.id ? '更新成功' : '新增成功');
+          this.$message.success(this.form.id ? "更新成功" : "新增成功");
           this.getList(); // 刷新列表
           this.dialogFormVisible = false;
         })
         .catch(() => {
-          this.$message.error(this.form.id ? '更新失败' : '新增失败');
+          this.$message.error(this.form.id ? "更新失败" : "新增失败");
         });
     },
-
+    handleDialogClose() {
+      this.isDetail = false;
+    },
     /** 删除按钮点击 */
     handleDelete(row) {
       this.$confirm("是否确认删除所选数据？", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
-        type: "warning"
+        type: "warning",
-      }).then(() => {
+      })
+        .then(() => {
           deleteSpan([row.id]).then(() => {
             this.$message.success("删除成功");
             this.getList();
           });
-      }).catch(() => {});
+        })
+        .catch(() => {});
     },
 
     /** 搜索与重置 */
@@ -368,8 +426,8 @@ export default {
         status: undefined,
       };
       this.getList();
-    }
+    },
-  }
+  },
 };
 </script>
 <style scoped lang="scss">