sgxt_web/src/views/backOfficeSystem/JudgmentHome/tacticalResearch/addMeeting.vue

<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">创建会议{{ title }} </span>
      <div>
        <el-button type="primary" size="small" :loading="loading" @click="submit">保存</el-button>
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <div class="form_cnt">
      <FormMessage v-model="listQuery" :formList="formData" ref="elform" :rules="rules">
        <!-- <template #glxsmc>
          <el-input placeholder="请选择关联线索" @click="chooseVisiblexS = true" readonly v-model="listQuery.glxsmc"></el-input>
        </template> -->
        <template #chryList>
          <el-input placeholder="请选择参会人员" @click="openMeetings = true" readonly v-model="listQuery.rymc"></el-input>
        </template>
      </FormMessage>
    </div>
  </div>
  <Personnel v-model="openMeetings" />
  <ChooseUser v-model="chooseVisible" :Single="false" @choosedUsers="handleUserSelected" :roleIds="roleIds" />
  <Xslist v-model="chooseVisiblexS" @choosed="choosed" :roleIds="roleIdsxs"></Xslist>
</template>

<script setup>
import ChooseUser from "@/components/ChooseList/ChooseUser/index.vue";
// import Xslist from '@/components/ChooseList/ChooseXs/index.vue'
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import Personnel from '@/views/backOfficeSystem/JudgmentHome/MeetingRoom/components/Communications/personnel.vue'
import { ref, defineExpose, reactive, defineEmits, getCurrentInstance, } from "vue";
import dayjs from 'dayjs';

const emit = defineEmits(["updateDate"]);

const roleIds = ref([]); //角色id
const chooseVisible = ref(false);
const roleIdsxs = ref([]); //角色id
const chooseVisiblexS = ref(false);
const { proxy } = getCurrentInstance();
const dialogForm = ref(false); //弹窗
const rules = reactive({
  hskssj: [{ required: true, message: "请选择会商开始时间", trigger: "change" }],
  hsjssj: [{ required: true, message: "请选择会商结束时间", trigger: "change" }],
  hsnr: [{ required: true, message: "请输入会商内容", trigger: "blur" }],
  hsbt: [{ required: true, message: "请输入会商标题", trigger: "blur" }],
  // glxsmc: [{ required: true, message: "请选择关联线索", trigger: "change" }],
  chryList: [{ required: true, message: "请选择参会人员", trigger: "change" }],
});
const formData = ref([
  { label: "会商开始时间", prop: "hskssj", type: "datetime" },
  { label: "会商结束时间", prop: "hsjssj", type: "datetime" },
  { label: "会商内容", prop: "hsnr", type: "textarea", width: "100%" },
  // { label: "关联线索", prop: "glxsmc", type: "slot", },
  { label: "会商标题", prop: "hsbt", type: "input" },
  // { label: "参会人员", prop: "chryList", type: "slot" ,width:'100%'},
]);
const listQuery = ref({}); //表单
const loading = ref(false);
const elform = ref();
const title = ref("");
const outRow = ref({})
// 初始化数据
const init = (type, row, outRowObj = {}) => {
  outRow.value = outRowObj
  dialogForm.value = true;
  title.value = type == "add" ? "新增" : "编辑";
  if (row) {
    getDataById(row.id)
  } else {
    listQuery.value = {
      hskssj: dayjs().format("YYYY-MM-DD HH:mm:ss"),
      hsjssj: dayjs().add(1, "hour").format("YYYY-MM-DD HH:mm:ss"),
    }
  }
};
// 根据id查询详情
const getDataById = (id) => {
  qcckGet({ id }, "/mosty-gsxt/wshs/selectByid").then((res) => {
    res.rymc = res.chryList ? res.chryList.map(v => v.chryxm).join(",") : '';
    res.chryList = res.chryList ? res.chryList.map(item => item.chryid) : [];
    roleIds.value = res.chryList;
    roleIdsxs.value = res.glxsid ? [res.glxsid] : [];
    listQuery.value = res;
  });
};

const handleUserSelected = (userData) => {
  roleIds.value = userData.map(item => item.id);
  listQuery.value.chryList = userData.map(item => item.id)
  listQuery.value.rymc = userData.map(item => item.userName).join("、");
};

const choosed = (data) => {
  listQuery.value.glxsmc = data[0].xsMc;
  listQuery.value.glxsid = data[0].id;
  roleIdsxs.value = data.map(item => item.id);
};

// 提交
const submit = () => {
  elform.value.submit((data) => {
    let url = title.value == "新增" ? "/mosty-gsxt/wshs/add" : "/mosty-gsxt/wshs/update";
    let params = {
      ...data,
      glxsid: outRow.value.id,
      glxsmc: outRow.value.xsMc,
     };
    loading.value = true;
    qcckPost(params, url).then(() => {
      loading.value = false;
      proxy.$message({ type: "success", message: title.value + "成功" });
      emit("updateDate");
      close();
    }).catch(() => { loading.value = false; });
  });
};

// 关闭
const close = () => {
  listQuery.value = {};
  roleIds.value = [];
  roleIdsxs.value = [];
  dialogForm.value = false;
  loading.value = false;
};
// 选择参会人员
const openMeetings = ref(false)

defineExpose({ init });
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
</style>