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

<template>
  <div class="rule-type">
    <DialogCom
      :title="id ? '高管工作部署会议记录详情' : '新增高管工作部署会议记录'"
      :visible.sync="isShow"
      @close="onHide"
      width="700px"
    >
      <div class="page-body">
        <el-form
          :model="formData"
          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-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-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-descriptions-item
              labelClassName="gx_info_label"
              label="会议日期"
            >
              {{
                formData.date
                  ? dayjs(formData.date).format("YYYY年MM月DD日")
                  : ""
              }}
            </el-descriptions-item>
            <!-- <el-form-item prop="date" label="会议日期:">
            <el-date-picker
              :disabled="true"
              v-model="formData.date"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              placeholder="请选择会议日期"
              type="date"
              :clearable="false"
            ></el-date-picker>
          </el-form-item> -->
            <el-descriptions-item labelClassName="gx_info_label" label="主持人">
              {{ getLabel(dict.type.hsggbsdj_role, formData.roleId) }}
            </el-descriptions-item>
            <!-- <el-form-item prop="userIds" label="主持人:">
            <div>
              <el-input
                :disabled="true"
                :readonly="true"
                v-model="joinedStringArray"
                placeholder="点击选择"
              ></el-input>
              <el-button @click="selectUser" v-if="false">选择</el-button>
            </div>
          </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-descriptions-item
              labelClassName="gx_info_label"
              label="附件(包含不限于会议照片,会议通知等)"
            >
              <!-- <imgs-upload
                :limit="5"
                v-model="formData.images"
                :fileSize="2"
              ></imgs-upload> -->
              <W-file-upload
              :isRem="false"
              :isShowTip="false"
                ref="upload"
                :defaultValue="formFileListDefualtValue"
                v-model="formData.images"
              />
            </el-descriptions-item>
            <!-- <el-form-item
            label="附件(包含不限于会议照片,会议通知等)"
            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-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> -->
          </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>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { getLabel } from "@/views/commonOption.js";
import { Add, edit, gethsggbsdj } from "@/api/safetyBook/hsggbsdj";
import { deptTreeSelect } from "@/api/system/public";
import UserSelector from "@/components/userSelector/index.vue";
import ImgsUpload from "@/components/ImgsUpload";
import Editor from "@/components/Editor";
import dayjs from "dayjs";
import WFileUpload from "@/components/W-FileUpload/index.vue";
export default {
  components: { UserSelector, ImgsUpload, Editor,WFileUpload },
  dicts: ["hsggbsdj_role"],
  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",
      },
      formFileListDefualtValue:[],
      id: null,
      isShow: false,
      formData: this.reset(),
      //修改新增中的机构树
      deptOptions: [],
      formDataRules: {
        userIds: [{ required: true, message: "请选择主持人" }],
        date: [{ required: true, message: "请选择开会日期" }],
        images: [{ required: true, message: "请选择照片" }],
        content: [{ required: true, message: "请输入内容" }],
        title: [{ required: true, message: "请输入主题" }],
        orgId: [{ required: true, message: "请选择行社" }],
        joinNames: [{ 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(", ");
    //   },
    // },
  },
  methods: {
    ...mapMutations([]),
    getLabel,
    isPic(url) {
      if (url.endsWith("jpg") || url.endsWith("png")) {
        return true;
      }
      return false;
    },
    dayjs,
    /** 查询机构树数据 */
    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,
        joinNames: null,
        orgId: null,
      };
    },
    async refresh(id) {
      if (id != null && id != undefined) {
        await gethsggbsdj(id).then((res) => {
          // this.formData.names = res.data.userNames.split(",");
          this.formData = res.data;
          this.formFileListDefualtValue=res.data.images;
        });
      }
    },
    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();
    },

    // 事件
    //apimark//
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.brand_info {
  .el-form {
    width: 600px;
    padding-top: 40px;
  }
}
</style>