nealy done

src/views/company/Grid.vue

@@ -83,33 +83,41 @@
   background: none;
 }
 .gridDetail {
-  .el-dialog__header{
-    background: #2D3A67;
-    .el-dialog__title{
-      color:#fff;
+  .el-dialog__header {
+    background: #2d3a67;
+    .el-dialog__title {
+      color: #fff;
     }
   }
-  .el-dialog__body{
-    background: #2D3A67;
-    padding:10px 20px;
-    table{
-      td{
-        padding:10px;
-        color:#fff;
+  .el-dialog__body {
+    background: #2d3a67;
+    padding: 10px 20px;
+    table {
+      td {
+        padding: 10px;
+        color: #fff;
         text-align: center;
-        img{
+        img {
           border-radius: 3px;
         }
-        h4{
-          color:#30CEEE;
+        h4 {
+          color: #30ceee;
         }
       }
     }
   }
-  .el-dialog__footer{
-    background: #2D3A67;
+  .el-dialog__footer {
+    background: #2d3a67;
   }
 }
+.custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
 </style>
 <template>
   <section>
@@ -162,45 +170,75 @@
                   size="mini"
                   >安全生产网格化管理简介</el-button
                 >
+                <el-button
+                  @click="getEnterpriseInfo"
+                  type="primary"
+                  size="mini"
+                  >导入组织机构</el-button
+                >
               </el-form-item>
             </el-form>
             <div>
-              <el-row :gutter="20">
-                <el-col :span="4" v-for="item in gridList" :key="item.id">
-                  <div class="grid_item">
-                    <div style="position: relative">
-                      <el-input
-                        v-model="item.name"
-                        placeholder="请输入"
-                        size="mini"
-                      >
-                        <el-button
-                          slot="append"
-                          icon="el-icon-edit"
-                          size="mini"
-                          @click="editGridDetail(item)"
-                        ></el-button>
-                      </el-input>
-                      <i
-                        class="el-icon-arrow-right"
-                        style="
-                          position: absolute;
-                          top: 15px;
-                          right: 1px;
-                          cursor: pointer;
-                        "
-                      ></i>
-                    </div>
-                    <el-button type="primary" size="mini">添加</el-button>
-                  </div>
-                </el-col>
-              </el-row>
+              <!-- 暂时注释 -->
+              <!-- <div class="grid_item" style="width: 15%">
+                <div
+                  style="position: relative"
+                  v-for="item in gridList"
+                  :key="item.id"
+                >
+                  <el-input
+                    v-model="item.label"
+                    placeholder="请输入"
+                    size="mini"
+                  >
+                    <el-button
+                      slot="append"
+                      icon="el-icon-edit"
+                      size="mini"
+                      @click="editGridDetail(item)"
+                    ></el-button>
+                  </el-input>
+                  <i
+                    class="el-icon-arrow-right"
+                    style="
+                      position: absolute;
+                      top: 15px;
+                      right: 1px;
+                      cursor: pointer;
+                    "
+                  ></i>
+                </div>
+                <el-button type="primary" size="mini">添加</el-button>
+              </div> -->
+              <el-tree
+                :data="gridList"
+                node-key="id"
+                default-expand-all
+                :expand-on-click-node="false">
+                <span class="custom-tree-node" slot-scope="{ node, data }">
+                  <span>{{ node.label }}</span>
+                  <span>
+                    <!-- <el-button
+                      type="text"
+                      size="mini"
+                      @click="() => append(data)">
+                      Append
+                    </el-button> -->
+                    <el-button
+                      type="text"
+                      size="mini"
+                      @click="() => editGridDetail(node, data)">
+                      编辑
+                    </el-button>
+                  </span>
+                </span>
+              </el-tree>
             </div>
           </li>
         </ul>
       </div>
       <el-dialog
-        :title="'编辑' + curItem.name"
+        :title="'编辑' + curItem.label"
         :visible.sync="dialogFormVisible1"
         width="1000px"
         :close-on-click-modal="false"
@@ -284,20 +322,31 @@
             </el-col>
           </el-row>
           <el-form-item label="责任清单">
-            <el-input
+            <!-- <el-input
               type="textarea"
               v-model="form1.duty_list"
               placeholder=""
               rows="10"
-            ></el-input>
+            ></el-input> -->
+            <fuEditor v-model="form1.duty_list" :isClear="isClear"></fuEditor>
           </el-form-item>
           <el-form-item label="履职清单">
-            <el-input
+            <!-- <el-input
               type="textarea"
               v-model="form1.job_list"
               placeholder=""
               rows="10"
-            ></el-input>
+            ></el-input> -->
+            <fuEditor v-model="form1.job_list" :isClear="isClear"></fuEditor>
+          </el-form-item>
+          <el-form-item label="部门职责">
+            <!-- <el-input
+              type="textarea"
+              v-model="form1.depart_list"
+              placeholder=""
+              rows="10"
+            ></el-input> -->
+            <fuEditor v-model="form1.depart_list" :isClear="isClear"></fuEditor>
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
@@ -352,47 +401,58 @@
         class="gridDetail"
       >
         <div>
-          <table width="100%" border=1 cellspacing=0 cellpadding=0>
+          <table width="100%" border="1" cellspacing="0" cellpadding="0">
             <tr>
-              <td style="text-align:left;padding-left:10px;">
+              <td style="text-align: left; padding-left: 10px">
                 <p>姓名：</p>
-                <p>李达康</p>
+                <p>{{ form1.charge_person_name }}</p>
               </td>
               <td rowspan="2">
-                <img src="http://www.baianxi.com/images/test.jpg" width="80" alt="">
+                <img :src="form1.charge_person_photo" width="80" alt="" />
               </td>
               <td rowspan="2">
-                <img src="http://www.baianxi.com/images/zj.jpg" width="180" alt="">
+                <img :src="form1.certificate" width="180" alt="" />
               </td>
             </tr>
             <tr>
-              <td style="text-align:left;padding-left:10px;">
+              <td style="text-align: left; padding-left: 10px">
                 <p>手机：</p>
-                <p>15982456282</p>
+                <p>{{ form1.charge_person_phone }}</p>
               </td>
             </tr>
             <tr>
               <td colspan="3">
                 <h4 align="left" style="">责任清单</h4>
-                <div style="height:200px;">
-
+                <div style="height: 200px" v-html="form1.duty_list">
                 </div>
               </td>
             </tr>
             <tr>
               <td colspan="3">
                 <h4 align="left" style="">履职清单</h4>
-                <div style="height:200px;">
-
+                <div style="height: 200px" v-html="form1.job_list">
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td colspan="3">
+                <h4 align="left" style="">部门职责</h4>
+                <div style="height: 200px" v-html="form1.depart_list">
                 </div>
               </td>
             </tr>
-            <tr></tr>
           </table>
         </div>
         <div slot="footer">
-          <el-button @click="dialogFormVisible3 = false" size="mini">取 消</el-button>
-          <el-button type="primary" @click="dialogFormVisible3 = false" size="mini">确 定</el-button>
+          <el-button @click="dialogFormVisible3 = false" size="mini"
+            >取 消</el-button
+          >
+          <el-button
+            type="primary"
+            @click="dialogFormVisible3 = false"
+            size="mini"
+            >确 定</el-button
+          >
         </div>
       </el-dialog>
     </div>
@@ -429,7 +489,7 @@ export default {
       dptList: [],
       form1: {},
       gridList: [],
-      utype: localStorage.getItem('utype',0),
+      utype: localStorage.getItem("utype", 0),
       treeData1: {
         value: 0,
         label: "公司主要负责人",
@@ -492,7 +552,7 @@ export default {
       labelClassName: "bg-color-blue",
       curItem: {},
       treeData: {},
-      gridDetail:{}
+      gridDetail: {},
     };
   },
   methods: {
@@ -524,9 +584,9 @@ export default {
       this.id = data.id;
       this.enterprise_name = data.name;
       this.getDpt();
-      this.$api.getDepartmentList({ enterprise_id: data.id }).then((res) => {
-        this.dptList = res.data.data.list;
-      });
+      // this.$api.getDepartmentList({ enterprise_id: data.id }).then((res) => {
+      //   this.dptList = res.data.data.list;
+      // });
       this.form.enterprise_id = data.id;
       this.form.enterprise_name = data.name;
       this.$api.getEnterprise({ id: this.form.enterprise_id }).then((res) => {
@@ -536,7 +596,10 @@ export default {
       // 机构树
       this.$api.getGridTree({ enterprise_id: this.id }).then((res) => {
         this.treeData = res.data.data;
-        this.gridList = res.data.data;
+        if (res.data.data) {
+          this.gridList =
+            typeof res.data.data == "object" ? [res.data.data] : res.data.data;
+        }
       });
     },
     getData() {
@@ -550,11 +613,11 @@ export default {
     getDpt() {
       var parm = this.form;
       parm.enterprise_id = this.id;
-      this.$api.getStaffuserList(parm).then((res) => {
-        this.loading = false;
-        this.list = res.data.data.list;
-        this.total = res.data.data.total;
-      });
+      // this.$api.getStaffuserList(parm).then((res) => {
+      //   this.loading = false;
+      //   this.list = res.data.data.list;
+      //   this.total = res.data.data.total;
+      // });
     },
     del(id) {
       this.$confirm("确定删除吗", "提示", {
@@ -595,15 +658,15 @@ export default {
       this.dialogFormVisible1 = true;
       this.staff = { ...data };
     },
-    editGridDetail(item) {
-      if (!item.name) {
+    editGridDetail(node,item) {
+      if (!item.label) {
         this.$message.error("请先填写名称再编辑!");
         return;
       }
       this.dialogFormVisible1 = true;
       this.curItem = item;
       this.$api.getGridDetail({ id: item.id }).then((res) => {
-        this.form1 = res.data.data;
+        this.form1 = res.data.data?res.data.data:{};
       });
     },
     upload(type) {
@@ -620,12 +683,12 @@ export default {
         }
       });
     },
-    nodeClick(e,data){
+    nodeClick(e, data) {
       this.$api.getGridDetail({ id: data.value }).then((res) => {
         this.form1 = res.data.data;
         this.dialogFormVisible3 = true;
       });
-    }
+    },
   },
   created() {
     this.getData();