文书档案

src/views/safetyBook/aqbwbndjh/dialog.des.vue

@@ -1,34 +1,60 @@
 <template>
-    <div class="rule-type">
-      <DialogCom
-        :title="id ? '安全保卫部年度工作计划详情' : '新增安全保卫部年度工作计划'"
-        :visible.sync="isShow"
-        @close="onHide"
-        width="700px"
-      >
-        <div class="page-body">
-          <el-form
-            :model="formData"
-            :rules="formDataRules"
-            size="small"
-            ref="form"
-            label-position="right"
-            label-width="130px"
-            label-prefix=":"
+  <div class="rule-type">
+    <DialogCom
+      :title="id ? '安全保卫部年度工作计划详情' : '新增安全保卫部年度工作计划'"
+      :visible.sync="isShow"
+      @close="onHide"
+      width="700px"
+    >
+      <div class="page-body">
+        <el-form
+          :model="formData"
+          :rules="formDataRules"
+          size="small"
+          ref="form"
+          label-position="right"
+          label-width="130px"
+          label-prefix=":"
+        >
+          <el-descriptions
+            class="margin-top"
+            :column="1"
+            size="medium"
+            border
+            :label-style="labelStyle"
+            :contentStyle="content_style"
           >
-            <el-form-item prop="orgId" label="行社名称:">
+            <el-descriptions-item
+              labelClassName="gx_info_label"
+              label="行社名称"
+            >
+              {{ formData.orgName }}
+            </el-descriptions-item>
+            <!-- <el-form-item prop="orgId" label="行社名称:">
                 <el-input
               :readonly="true"
               v-model="formData.orgName"
               :disabled="true"
             ></el-input>
-            </el-form-item>
-            <el-form-item prop="type" label="文件种类:">
+            </el-form-item> -->
+            <el-descriptions-item
+              labelClassName="gx_info_label"
+              label="文件种类"
+            >
+              {{ formData.type }}
+            </el-descriptions-item>
+            <!-- <el-form-item prop="type" label="文件种类:">
               <el-input :disabled="true" :readonly="true"
                 v-model="formData.type"
               ></el-input>
-            </el-form-item>
-            <el-form-item label="工作年度" prop="year">
+            </el-form-item> -->
+            <el-descriptions-item
+              labelClassName="gx_info_label"
+              label="工作年度"
+            >
+              {{ formData.year }}
+            </el-descriptions-item>
+            <!-- <el-form-item label="工作年度" prop="year">
                   <el-date-picker :disabled="true" :readonly="true"
                     v-model="formData.year"
                     :clearable="timeClearable"
@@ -37,8 +63,8 @@
                     value-format="yyyy"
                   >
                   </el-date-picker>
-                </el-form-item>
-            <el-form-item prop="userIds" label="参与人员:" v-if="false">
+                </el-form-item> -->
+            <!-- <el-form-item prop="userIds" label="参与人员:" v-if="false">
               <div>
                 <el-input :disabled="true" :readonly="true"
                   v-model="joinedStringArray"
@@ -46,8 +72,14 @@
                 ></el-input>
                 <el-button @click="selectUser">选择</el-button>
               </div>
-            </el-form-item>
-            <el-form-item prop="date" label="文件日期:">
+            </el-form-item> -->
+            <el-descriptions-item
+              labelClassName="gx_info_label"
+              label="文件日期"
+            >
+              {{ formData.date }}
+            </el-descriptions-item>
+            <!-- <el-form-item prop="date" label="文件日期:">
               <el-date-picker :disabled="true" :readonly="true"
                 v-model="formData.date"
                 value-format="yyyy-MM-dd"
@@ -55,179 +87,204 @@
                 type="date"
                 :clearable="false"
               ></el-date-picker>
-            </el-form-item>
-  
-            <el-form-item label="上传附件（word、pdf文件格式）" prop="images">
+            </el-form-item> -->
+            <el-descriptions-item
+              labelClassName="gx_info_label"
+              label="附件(word、pdf文件格式)"
+            >
               <imgs-upload
                 :limit="5"
                 v-model="formData.images"
                 :fileSize="2"
               ></imgs-upload>
-            </el-form-item>
-            <div>
+            </el-descriptions-item>
+            <!-- <el-form-item label="上传附件（word、pdf文件格式）" prop="images">
+              <imgs-upload
+                :limit="5"
+                v-model="formData.images"
+                :fileSize="2"
+              ></imgs-upload>
+            </el-form-item> -->
+            <!-- <el-descriptions-item labelClassName="gx_info_label" label="内容" >
+            {{
+            formData.content
+            }}
+          </el-descriptions-item> -->
+          </el-descriptions>
+          <!-- <div>
               <el-form-item label="内容" prop="content" v-if="false">
                 <Editor style="height: 150px" v-model="formData.content"></Editor>
               </el-form-item>
-            </div>
-          </el-form>
-        </div>
-  
-        <div style="margin-top: 100px" slot="footer" class="dialog-footer">
-         
-          <!-- <el-button type="primary" @click="onSubmit">确定</el-button> -->
-          <el-button @click="isShow = false">确定</el-button>
-        </div>
-      </DialogCom>
-      <UserSelector ref="UserSelector" @select="onUserSelect"></UserSelector>
-    </div>
-  </template>
-  
-  <script>
-  import { mapState, mapMutations } from "vuex";
-  import { Add, edit, getaqbwbndjh } from "@/api/safetyBook/aqbwbndjh";
-  import { deptTreeSelect } from "@/api/system/public";
-  import UserSelector from "@/components/userSelector/index.vue";
-  import ImgsUpload from "@/components/ImgsUpload";
-  import Editor from "@/components/Editor";
-  export default {
-    dicts: ["safety_book_type"],
-    components: { UserSelector, ImgsUpload, Editor },
-    data() {
-      return {
-        id: null,
-        isShow: false,
-        timeClearable: true,
-        formData: this.reset(),
-        //修改新增中的机构树
-        deptOptions: [],
-        formDataRules: {
-          userIds: [{ required: true, message: "请选择参与人员" }],
-          date: [{ required: true, message: "请选择记录日期" }],
-          images: [{ required: true, message: "请选择照片" }],
-          content: [{ required: true, message: "请输入内容" }],
-          orgId: [{ required: true, message: "请选择机构" }],
-        },
-      };
-    },
-  
-    watch: {},
-    computed: {
-      ...mapState([]),
-      joinedStringArray: {
-        get() {
-          if (this.formData.names == null || this.formData.names == undefined) {
-            this.formData.names = this.formData.userNames.split(", ");
-          }
-          return this.formData.names.join(", ");
-        },
-        set(value) {
-          this.formData.names = value.split(", ");
-        },
+            </div> -->
+        </el-form>
+      </div>
+
+      <div style="margin-top: 100px" slot="footer" class="dialog-footer">
+        <!-- <el-button type="primary" @click="onSubmit">确定</el-button> -->
+        <el-button @click="isShow = false">确定</el-button>
+      </div>
+    </DialogCom>
+    <UserSelector ref="UserSelector" @select="onUserSelect"></UserSelector>
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations } from "vuex";
+import { Add, edit, getaqbwbndjh } from "@/api/safetyBook/aqbwbndjh";
+import { deptTreeSelect } from "@/api/system/public";
+import UserSelector from "@/components/userSelector/index.vue";
+import ImgsUpload from "@/components/ImgsUpload";
+import Editor from "@/components/Editor";
+export default {
+  dicts: ["safety_book_type"],
+  components: { UserSelector, ImgsUpload, Editor },
+  data() {
+    return {
+      labelStyle: {
+        color: "#000",
+        "text-align": "center",
+        height: "40px",
+        "min-width": "150px",
+        "word-break": "keep-all",
       },
-    },
-    methods: {
-      ...mapMutations([]),
-  
-      /** 查询机构树数据 */
-      getDeptTree() {
-        deptTreeSelect().then((response) => {
-          this.deptOptions = response.data;
-        });
+      content_style: {
+        "text-align": "left",
+        "min-width": "150px",
+        "word-break": "break-all",
       },
-      /** treeSelect组件自定义数据*/
-      tenantIdnormalizer(node, instanceId) {
-        if (node.children && !node.children.length) {
-          delete node.children;
-        }
-        return {
-          id: node.id,
-          label: node.shortName,
-          children: node.children,
-        };
+      id: null,
+      isShow: false,
+      timeClearable: true,
+      formData: this.reset(),
+      //修改新增中的机构树
+      deptOptions: [],
+      formDataRules: {
+        userIds: [{ required: true, message: "请选择参与人员" }],
+        date: [{ required: true, message: "请选择记录日期" }],
+        images: [{ required: true, message: "请选择照片" }],
+        content: [{ required: true, message: "请输入内容" }],
+        orgId: [{ required: true, message: "请选择机构" }],
       },
-  
-      reset() {
-        return {
-          id: null,
-          // names: [],
-          // userIds: [],
-          date: null,
-          images: [],
-          // content: null,
-          title: null,
-          orgId:null,
-          type:"工作计划",
-          year:null,
-        };
-      },
-      async refresh(id) {
-        if (id != null && id != undefined) {
-          await getaqbwbndjh(id).then((res) => {
-            // this.formData.names = res.data.userNames.split(",");
-            this.formData = res.data;
-            // this.formData.year=res.data.year;
-          });
+    };
+  },
+
+  watch: {},
+  computed: {
+    ...mapState([]),
+    joinedStringArray: {
+      get() {
+        if (this.formData.names == null || this.formData.names == undefined) {
+          this.formData.names = this.formData.userNames.split(", ");
         }
+        return this.formData.names.join(", ");
       },
-      async show(id) {
-        // console.log(id, "id");
-        this.getDeptTree();
-        this.formData = this.reset();
-        this.id = id;
-        await this.refresh(id);
-        this.isShow = true;
+      set(value) {
+        this.formData.names = value.split(", ");
       },
-  
-      // 事件
-      onHide() {
-        this.formData = this.reset();
-        this.$refs.form.resetFields();
-      },
-      onSubmit() {
-        console.log(this.formData, "this.formData");
-        this.$refs.form.validate(async (isValidate) => {
-          if (!isValidate) return;
-          if (this.id == null || this.id == undefined) {
-            await Add(this.formData).then((res) => {
-              this.$emit("success");
-              this.isShow = false;
-            });
-          } else {
-            await edit(this.formData).then((res) => {
-              this.$emit("success");
-              this.isShow = false;
-            });
-          }
+    },
+  },
+  methods: {
+    ...mapMutations([]),
+
+    /** 查询机构树数据 */
+    getDeptTree() {
+      deptTreeSelect().then((response) => {
+        this.deptOptions = response.data;
+      });
+    },
+    /** treeSelect组件自定义数据*/
+    tenantIdnormalizer(node, instanceId) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.id,
+        label: node.shortName,
+        children: node.children,
+      };
+    },
+
+    reset() {
+      return {
+        id: null,
+        // names: [],
+        // userIds: [],
+        date: null,
+        images: [],
+        // content: null,
+        title: null,
+        orgId: null,
+        type: "工作计划",
+        year: null,
+      };
+    },
+    async refresh(id) {
+      if (id != null && id != undefined) {
+        await getaqbwbndjh(id).then((res) => {
+          // this.formData.names = res.data.userNames.split(",");
+          this.formData = res.data;
+          // this.formData.year=res.data.year;
         });
-      },
-      //选择用户回调
-      onUserSelect(data) {
-        var ids = data.map((obj) => obj.id);
-        var names = data.map((obj) => obj.name);
-        this.formData.userIds = ids;
-        this.formData.names = names;
-        this.formData.userNames = names.join(",");
-        //   console.log(this.formData.userIds, "this.formData.userIds");
-      },
-      //用户选择
-      selectUser(event) {
-        //   event.preventDefault();
-        this.$refs.UserSelector.show();
-      },
-  
-      // 事件
-      //apimark//
+      }
+    },
+    async show(id) {
+      // console.log(id, "id");
+      this.getDeptTree();
+      this.formData = this.reset();
+      this.id = id;
+      await this.refresh(id);
+      this.isShow = true;
+    },
+
+    // 事件
+    onHide() {
+      this.formData = this.reset();
+      this.$refs.form.resetFields();
+    },
+    onSubmit() {
+      console.log(this.formData, "this.formData");
+      this.$refs.form.validate(async (isValidate) => {
+        if (!isValidate) return;
+        if (this.id == null || this.id == undefined) {
+          await Add(this.formData).then((res) => {
+            this.$emit("success");
+            this.isShow = false;
+          });
+        } else {
+          await edit(this.formData).then((res) => {
+            this.$emit("success");
+            this.isShow = false;
+          });
+        }
+      });
+    },
+    //选择用户回调
+    onUserSelect(data) {
+      var ids = data.map((obj) => obj.id);
+      var names = data.map((obj) => obj.name);
+      this.formData.userIds = ids;
+      this.formData.names = names;
+      this.formData.userNames = names.join(",");
+      //   console.log(this.formData.userIds, "this.formData.userIds");
+    },
+    //用户选择
+    selectUser(event) {
+      //   event.preventDefault();
+      this.$refs.UserSelector.show();
     },
-    mounted() {},
-  };
-  </script>
-  
-  <style lang="scss" scoped>
-  .brand_info {
-    .el-form {
-      width: 600px;
-      padding-top: 40px;
-    }
+
+    // 事件
+    //apimark//
+  },
+  mounted() {},
+};
+</script>
+
+<style lang="scss" scoped>
+.brand_info {
+  .el-form {
+    width: 600px;
+    padding-top: 40px;
   }
-  </style>
-  
+}
+</style>

src/views/safetyBook/dialog.des.vue

@@ -1,37 +1,50 @@
 <template>
-    <div class="rule-type">
-      <DialogCom
-        :title="id ? '安全责任书存档记录详情' : '新增安全责任书存档记录'"
-        :visible.sync="isShow"
-        @close="onHide"
-        width="800px"
-      >
-        <div class="page-body">
-          <el-form
-            :model="formData"
-            :rules="formDataRules"
-            size="small"
-            ref="form"
-            label-position="right"
-            label-width="180px"
-            label-prefix=":"
+  <div class="rule-type">
+    <DialogCom
+      :title="id ? '安全责任书存档记录详情' : '新增安全责任书存档记录'"
+      :visible.sync="isShow"
+      @close="onHide"
+      width="800px"
+    >
+      <div class="page-body">
+        <el-form
+          :model="formData"
+          :rules="formDataRules"
+          size="small"
+          ref="form"
+          label-position="right"
+          label-width="180px"
+          label-prefix=":"
+        >
+          <el-descriptions
+            class="margin-top"
+            :column="1"
+            size="medium"
+            border
+            :label-style="labelStyle"
+            :contentStyle="content_style"
           >
-            <el-form-item prop="orgName" label="签署人所在机构:" >
+            <el-descriptions-item
+              labelClassName="gx_info_label"
+              label="签署人所在机构"
+            >
+              {{ formData.orgName }}
+            </el-descriptions-item>
+            <!-- <el-form-item prop="orgName" label="签署人所在机构:" >
                 <el-input
               :readonly="true"
               v-model="formData.orgName"
               :disabled="true"
             ></el-input>
-              <!-- <tree-select
-                v-model="formData.orgId"
-                :options="deptOptions"
-                :show-count="true"
-                :normalizer="tenantIdnormalizer"
-                :props="{ checkStrictly: true, label: 'name' }"
-                placeholder="请选择签署人所在机构"
-              /> -->
-            </el-form-item>
-            <el-form-item label="所属年度" prop="year">
+             
+            </el-form-item> -->
+            <el-descriptions-item
+              labelClassName="gx_info_label"
+              label="所属年度"
+            >
+              {{ formData.year }}
+            </el-descriptions-item>
+            <!-- <el-form-item label="所属年度" prop="year">
                   <el-date-picker
                   :disabled="true"
                     v-model="formData.year"
@@ -41,8 +54,14 @@
                     value-format="yyyy"
                   >
                   </el-date-picker>
-                </el-form-item>
-            <el-form-item prop="type" label="签署责任书类型:">
+                </el-form-item> -->
+            <el-descriptions-item
+              labelClassName="gx_info_label"
+              label="签署责任书类型"
+            >
+              {{ formData.type }}
+            </el-descriptions-item>
+            <!-- <el-form-item prop="type" label="签署责任书类型:">
               <el-select
               :disabled="true"
                 v-model="formData.type"
@@ -56,177 +75,191 @@
                   :value="`${dict.value}`"
                 ></el-option>
               </el-select>
-            </el-form-item>
-          </el-form>
-          <el-button @click="openSelect" v-if="false">上传签署文件</el-button>
-  
-          <el-table :data="tableData" style="width: 100%;margin-top: 10px;" height="500px">
-            <el-table-column prop="names" label="签署人">
-              <template slot-scope="scope">
-                <template v-for="item in scope.row.names">
-                  {{ item }}
-                  <br />
-                </template>
+            </el-form-item> -->
+          </el-descriptions>
+        </el-form>
+        <el-button @click="openSelect" v-if="false">上传签署文件</el-button>
+
+        <el-table
+          :data="tableData"
+          style="width: 100%; margin-top: 10px"
+          height="500px"
+        >
+          <el-table-column prop="names" label="签署人">
+            <template slot-scope="scope">
+              <template v-for="item in scope.row.names">
+                {{ item }}
+                <br />
               </template>
-            </el-table-column>
-            <el-table-column prop="time" label="签署时间">
-                <template slot-scope="r">
-                {{
-                  r.row.time
-                    ? dayjs(r.row.time).format("YYYY年-MM月-DD日")
-                    : ""
-                }}
-              </template> </el-table-column>
-            <el-table-column prop="files" label="签署文件">
-              <template slot-scope="r">
+            </template>
+          </el-table-column>
+          <el-table-column prop="time" label="签署时间">
+            <template slot-scope="r">
+              {{
+                r.row.time ? dayjs(r.row.time).format("YYYY年-MM月-DD日") : ""
+              }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="files" label="签署文件">
+            <template slot-scope="r">
               <el-image
                 style="width: 50px; height: 50px"
                 :src="r.row.files"
                 :preview-src-list="[r.row.files]"
               ></el-image>
             </template>
-               </el-table-column>
-  
-            <el-table-column prop="names" label="操作" v-if="false">
-              <template v-slot="{ row }">
-                <el-button type="text" @click="removeRow(row)">删除</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-  
-        <div slot="footer" class="dialog-footer" style="margin-top: 10px;">
-          <el-button @click="isShow = false">确定</el-button>
-          <!-- <el-button type="primary" @click="onSubmit">确定</el-button> -->
-        </div>
-     </DialogCom>
-      <DialogSelect ref="DialogSelect" @success="getSign"></DialogSelect>
-    
-    </div>
-  </template>
-  
-  <script>
-  import { mapState, mapMutations } from "vuex";
-  import {
-    listSafetyBook,
-    getSafetyBook,
-    editOrAdd,
-    delSafetyBook,
-  } from "@/api/safetyBook/index";
-  import { deptTreeSelect } from "@/api/system/public";
-  import DialogSelect from "./dialog.sign";
-  import dayjs from "dayjs";
-  export default {
-    dicts: ["safety_book_type"],
-    data() {
+          </el-table-column>
+
+          <el-table-column prop="names" label="操作" v-if="false">
+            <template v-slot="{ row }">
+              <el-button type="text" @click="removeRow(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <div slot="footer" class="dialog-footer" style="margin-top: 10px">
+        <el-button @click="isShow = false">确定</el-button>
+        <!-- <el-button type="primary" @click="onSubmit">确定</el-button> -->
+      </div>
+    </DialogCom>
+    <DialogSelect ref="DialogSelect" @success="getSign"></DialogSelect>
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations } from "vuex";
+import {
+  listSafetyBook,
+  getSafetyBook,
+  editOrAdd,
+  delSafetyBook,
+} from "@/api/safetyBook/index";
+import { deptTreeSelect } from "@/api/system/public";
+import DialogSelect from "./dialog.sign";
+import dayjs from "dayjs";
+export default {
+  dicts: ["safety_book_type"],
+  data() {
+    return {
+      labelStyle: {
+        color: "#000",
+        "text-align": "center",
+        height: "40px",
+        "min-width": "150px",
+        "word-break": "keep-all",
+      },
+      content_style: {
+        "text-align": "left",
+        "min-width": "150px",
+        "word-break": "break-all",
+      },
+      id: null,
+      isShow: false,
+      timeClearable: true,
+      formData: this.reset(),
+      tableData: [],
+      //修改新增中的机构树
+      deptOptions: [],
+      formDataRules: {
+        orgId: [{ required: true, message: "请选择签署责任人所在机构" }],
+        type: [{ required: true, message: "请选择签署责任书类型" }],
+        year: [{ required: true, message: "请选择所属年度" }],
+      },
+    };
+  },
+
+  watch: {},
+  computed: {
+    ...mapState([]),
+  },
+  methods: {
+    ...mapMutations([]),
+    dayjs,
+    //添加签署后回调
+    getSign(data) {
+      this.tableData.push(data);
+      // console.log(data, "ddd");
+    },
+    //新增签署
+    openSelect() {
+      this.$refs.DialogSelect.show();
+    },
+    /** 查询机构树数据 */
+    getDeptTree() {
+      deptTreeSelect().then((response) => {
+        this.deptOptions = response.data;
+      });
+    },
+    /** treeSelect组件自定义数据*/
+    tenantIdnormalizer(node, instanceId) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
       return {
-        id: null,
-        isShow: false,
-        timeClearable: true,
-        formData: this.reset(),
-        tableData: [],
-        //修改新增中的机构树
-        deptOptions: [],
-        formDataRules: {
-          orgId: [{ required: true, message: "请选择签署责任人所在机构" }],
-          type: [{ required: true, message: "请选择签署责任书类型" }],
-          year: [{ required: true, message: "请选择所属年度" }],
-        },
+        id: node.id,
+        label: node.shortName,
+        children: node.children,
       };
     },
-  
-    watch: {},
-    computed: {
-      ...mapState([]),
+    removeRow(row) {
+      this.tableData = this.tableData.filter((item) => item !== row);
     },
-    methods: {
-      ...mapMutations([]),
-      dayjs,
-      //添加签署后回调
-      getSign(data) {
-        this.tableData.push(data);
-        // console.log(data, "ddd");
-      },
-      //新增签署
-      openSelect() {
-        this.$refs.DialogSelect.show();
-      },
-      /** 查询机构树数据 */
-      getDeptTree() {
-        deptTreeSelect().then((response) => {
-          this.deptOptions = response.data;
-        });
-      },
-      /** treeSelect组件自定义数据*/
-      tenantIdnormalizer(node, instanceId) {
-        if (node.children && !node.children.length) {
-          delete node.children;
-        }
-        return {
-          id: node.id,
-          label: node.shortName,
-          children: node.children,
-        };
-      },
-      removeRow(row) {
-        this.tableData = this.tableData.filter((item) => item !== row);
-      },
-      reset() {
-        return {
-          id: null,
-          type: null,
-          year:null,
-        };
-      },
-      async refresh(id) {
-        if(id!=null&&id!=undefined){
-          await getSafetyBook(id).then((res) => {
-            // console.log(res.data,"res")
-            this.formData=res.data;
-            this.tableData=res.data.bookUsers;
-          });
-        }
-      },
-      async show(id) {
-        // console.log(id, "id");
-        this.getDeptTree();
-        this.formData=this.reset();
-        this.tableData=[];
-        this.id = id;
-        await this.refresh(id);
-        this.isShow = true;
-      },
-  
-      // 事件
-      onHide() {
-        this.formData = this.reset();
-        this.$refs.form.resetFields();
-      },
-      onSubmit() {
-        console.log(this.formData,"this.formData")
-        this.$refs.form.validate(async (isValidate) => {
-          if (!isValidate) return;
-          this.formData.bookUsers=this.tableData;
-          await editOrAdd(this.formData);
-          this.$emit("success");
-          this.isShow = false;
+    reset() {
+      return {
+        id: null,
+        type: null,
+        year: null,
+      };
+    },
+    async refresh(id) {
+      if (id != null && id != undefined) {
+        await getSafetyBook(id).then((res) => {
+          // console.log(res.data,"res")
+          this.formData = res.data;
+          this.tableData = res.data.bookUsers;
         });
-      },
-  
-      // 事件
-      //apimark//
+      }
+    },
+    async show(id) {
+      // console.log(id, "id");
+      this.getDeptTree();
+      this.formData = this.reset();
+      this.tableData = [];
+      this.id = id;
+      await this.refresh(id);
+      this.isShow = true;
+    },
+
+    // 事件
+    onHide() {
+      this.formData = this.reset();
+      this.$refs.form.resetFields();
+    },
+    onSubmit() {
+      console.log(this.formData, "this.formData");
+      this.$refs.form.validate(async (isValidate) => {
+        if (!isValidate) return;
+        this.formData.bookUsers = this.tableData;
+        await editOrAdd(this.formData);
+        this.$emit("success");
+        this.isShow = false;
+      });
     },
-    mounted() {},
-    components: { DialogSelect },
-  };
-  </script>
-  
-  <style lang="scss" scoped>
-  .brand_info {
-    .el-form {
-      width: 600px;
-      padding-top: 40px;
-    }
+
+    // 事件
+    //apimark//
+  },
+  mounted() {},
+  components: { DialogSelect },
+};
+</script>
+
+<style lang="scss" scoped>
+.brand_info {
+  .el-form {
+    width: 600px;
+    padding-top: 40px;
   }
-  </style>
-  
+}
+</style>

src/views/safetyBook/hsggbsdj/dialog.des.vue

@@ -15,23 +15,48 @@
           label-width="130px"
           label-prefix=":"
         >
-          <el-form-item prop="orgId" label="行社名称:">
+          <el-descriptions
+            class="margin-top"
+            :column="1"
+            size="medium"
+            border
+            :label-style="labelStyle"
+            :contentStyle="content_style"
+          >
+            <el-descriptions-item
+              labelClassName="gx_info_label"
+              label="行社名称"
+            >
+              {{ formData.orgName }}
+            </el-descriptions-item>
+            <!-- <el-form-item prop="orgId" label="行社名称:">
             <el-input
               :readonly="true"
               v-model="formData.orgName"
               :disabled="true"
             ></el-input>
-          </el-form-item>
-          <el-form-item prop="title" label="会议主题:">
+          </el-form-item> -->
+            <el-descriptions-item
+              labelClassName="gx_info_label"
+              label="会议主题"
+            >
+              {{ formData.title }}
+            </el-descriptions-item>
+            <!-- <el-form-item prop="title" label="会议主题:">
             <el-input
               :disabled="true"
               style="width: 100%; margin-bottom: 20px"
               v-model="formData.title"
               placeholder="请输入会议主题"
             ></el-input>
-          </el-form-item>
-
-          <el-form-item prop="date" label="会议日期:">
+          </el-form-item> -->
+            <el-descriptions-item
+              labelClassName="gx_info_label"
+              label="会议日期"
+            >
+              {{ formData.date }}
+            </el-descriptions-item>
+            <!-- <el-form-item prop="date" label="会议日期:">
             <el-date-picker
               :disabled="true"
               v-model="formData.date"
@@ -41,8 +66,11 @@
               type="date"
               :clearable="false"
             ></el-date-picker>
-          </el-form-item>
-          <el-form-item prop="userIds" label="主持人:">
+          </el-form-item> -->
+            <el-descriptions-item labelClassName="gx_info_label" label="主持人">
+              {{ joinedStringArray }}
+            </el-descriptions-item>
+            <!-- <el-form-item prop="userIds" label="主持人:">
             <div>
               <el-input
                 :disabled="true"
@@ -52,16 +80,32 @@
               ></el-input>
               <el-button @click="selectUser" v-if="false">选择</el-button>
             </div>
-          </el-form-item>
-          <el-form-item prop="title" label="参会人员:">
+          </el-form-item> -->
+            <el-descriptions-item
+              labelClassName="gx_info_label"
+              label="参会人员"
+            >
+              {{ formData.joinNames }}
+            </el-descriptions-item>
+            <!-- <el-form-item prop="title" label="参会人员:">
             <el-input
               :disabled="true"
               style="width: 100%; margin-bottom: 20px"
               v-model="formData.joinNames"
               placeholder="请输入参会人员"
             ></el-input>
-          </el-form-item>
-          <el-form-item
+          </el-form-item> -->
+            <el-descriptions-item
+              labelClassName="gx_info_label"
+              label="附件(包含不限于会议照片,会议通知等)"
+            >
+              <imgs-upload
+                :limit="5"
+                v-model="formData.images"
+                :fileSize="2"
+              ></imgs-upload>
+            </el-descriptions-item>
+            <!-- <el-form-item
             label="附件(包含不限于会议照片,会议通知等)"
             prop="images"
           >
@@ -70,20 +114,24 @@
               v-model="formData.images"
               :fileSize="2"
             ></imgs-upload>
-          </el-form-item>
-          <div>
-            <el-form-item label="会议重点" prop="content">
-              <!-- <Editor style="height: 150px" v-model="formData.content"></Editor> -->
+          </el-form-item> -->
+            <el-descriptions-item
+              labelClassName="gx_info_label"
+              label="会议重点"
+            >
+              {{ formData.content }}
+            </el-descriptions-item>
+            <!-- <el-form-item label="会议重点" prop="content">
+              
               <el-input :disable="true" :readonly="true" type="textarea" v-model="formData.content" rows="6" :autosize="{ minRows: 6, maxRows: 10 }"></el-input>
-            </el-form-item>
-          </div>
+            </el-form-item> -->
+          </el-descriptions>
         </el-form>
       </div>
 
       <div style="margin-top: 100px" slot="footer" class="dialog-footer">
         <el-button @click="isShow = false">确定</el-button>
         <!-- <el-button type="primary" @click="onSubmit">确定</el-button> -->
-        
       </div>
     </DialogCom>
     <UserSelector ref="UserSelector" @select="onUserSelect"></UserSelector>
@@ -101,6 +149,18 @@ export default {
   components: { UserSelector, ImgsUpload, Editor },
   data() {
     return {
+      labelStyle: {
+        color: "#000",
+        "text-align": "center",
+        height: "40px",
+        "min-width": "150px",
+        "word-break": "keep-all",
+      },
+      content_style: {
+        "text-align": "left",
+        "min-width": "300px",
+        "word-break": "break-all",
+      },
       id: null,
       isShow: false,
       formData: this.reset(),