沈丘营商办后台前端项目
王恒
2025-08-11 813837a9555ea9929c64cc5e88ef4a56d2bd7b82
src/views/system/manage/index.vue
@@ -11,7 +11,7 @@
    >
      <el-form-item label="计划名称" prop="companyName">
        <el-input
          v-model="queryParams.planName"
          v-model="queryParams.enforceReason"
          placeholder="请输入计划名称"
          clearable
          style="width: 200px"
@@ -27,9 +27,9 @@
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="执法单位" prop="executiveSection">
      <el-form-item label="执法单位" prop="applyDeptIds">
        <el-input
          v-model="queryParams.executiveSection"
          v-model="queryParams.applyDeptIds"
          placeholder="请输入执法单位"
          clearable
          style="width: 200px"
@@ -126,16 +126,16 @@
        label="统一社会信用代码"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="industry"
        label="所属行业"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="inspectionMethod"
        label="检查方式"
        width="180"
      ></el-table-column>
      <el-table-column prop="industry" label="所属行业" width="180">
        <template #default="scope">{{
          industryToText(scope.row.industry)
        }}</template>
      </el-table-column>
      <el-table-column prop="inspectionMethod" label="检查方式" width="180">
        <template #default="scope">{{
          methodToText(scope.row.inspectionMethod)
        }}</template>
      </el-table-column>
      <el-table-column
        prop="enforceContent"
        label="检查内容"
@@ -146,21 +146,19 @@
        label="执行科室"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="planFrequency"
        label="计划频次"
        width="180"
      ></el-table-column>
      <el-table-column prop="planFrequency" label="计划频次" width="180">
        <template #default="scope">{{ frequencyToText(scope.row) }} </template>
      </el-table-column>
      <el-table-column
        prop="planMonth"
        label="计划月份"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="orderStatus"
        label="状态"
        width="180"
      ></el-table-column>
      <el-table-column prop="orderStatus" label="状态" width="180">
        <template #default="scope">{{
          statusToText(scope.row.checkStatus)
        }}</template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
@@ -186,31 +184,42 @@
    />
    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" v-model="open" width="700px" append-to-body>
    <el-dialog
      :title="title"
      v-model="open"
      width="700px"
      @close="closeUpdHandler"
      append-to-body
    >
      <el-form ref="deptRef" :model="form" :rules="rules" label-width="140px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="计划名称" prop="planName">
              <el-input v-model="form.planName" placeholder="请输入计划名称" />
            <el-form-item label="计划名称" prop="enforceReason">
              <el-input
                v-model="form.enforceReason"
                placeholder="请输入计划名称"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="制定计划的机构" prop="makeOrgId">
            <el-form-item label="制定计划的机构" prop="applyOrgId">
              <el-tree-select
                v-model="form.makeOrgId"
                v-model="form.applyOrgId"
                :data="deptOptions"
                :props="{ value: 'id', label: 'label', children: 'children' }"
                value-key="id"
                placeholder="请选择制定计划的机构"
                check-strictly
                :default-expanded-keys="[form.applyOrgId]"
                :default-checked-keys="[form.applyOrgId]"
                @node-click="changeTreeHandler"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执行科室" prop="executiveSection">
            <el-form-item label="执行科室" prop="applyDeptIds">
              <el-select
                v-model="selectOffices"
                multiple
@@ -231,7 +240,7 @@
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
        <el-row :gutter="20" v-if="!form.orderId">
          <el-col :span="24">
            <el-form-item label="被检查的对象" prop="checkdIds">
              <el-button type="primary" @click="openFirmSelect"
@@ -240,11 +249,33 @@
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-else>
          <el-col :span="12">
            <el-form-item label="被检查对象" prop="companyName">
              <el-input
                v-model="form.companyName"
                placeholder="请输入被检查对象"
                readonly
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="统一社会信用代码" prop="companyCode">
              <el-input
                v-model="form.companyCode"
                placeholder="请输入统一社会信用代码"
                readonly
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="form.checkdIds">
          <el-col :span="24">
            <el-form-item label="被检查对象信息">
              <el-table
                :data="form.checkdObject"
                :data="checkedList"
                max-height="200px"
                style="width: 100%"
              >
@@ -256,9 +287,9 @@
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="检查方式" prop="checkdType">
            <el-form-item label="检查方式" prop="inspectionMethod">
              <el-select
                v-model="form.checkdType"
                v-model="form.inspectionMethod"
                placeholder="请选择检查方式"
                style="width: 100%"
              >
@@ -290,9 +321,9 @@
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="检查内容" prop="checkdContent">
            <el-form-item label="检查内容" prop="enforceContent">
              <el-input
                v-model="form.checkdContent"
                v-model="form.enforceContent"
                type="textarea"
                placeholder="请输入检查内容"
              />
@@ -301,8 +332,8 @@
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计划频率" prop="planFrequency">
              <el-input v-model="form.planFrequency" placeholder="请输入频率">
            <el-form-item label="计划频次" prop="planFrequency">
              <el-input v-model="form.planFrequency" placeholder="请输入频次">
                <template #append>
                  <el-select
                    v-model="form.planFrequencyUnit"
@@ -394,43 +425,43 @@
        <el-row>
          <el-col :span="12">
            <el-form-item label="计划编号:">{{
              planDetail.planNo
              planDetail.orderNo
            }}</el-form-item>
            <el-form-item label="计划名称:">{{
              planDetail.planName
              planDetail.enforceReason
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="制定计划的机构:">{{
              planDetail.makeOrgName
              planDetail.applyOrgName
            }}</el-form-item>
            <el-form-item label="被检查的对象:">{{
              planDetail.checkdObject
              planDetail.companyName
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="统一社会信用代码:">{{
              planDetail.unifiedSocialCreditCode
              planDetail.companyCode
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属行业:">{{
              planDetail.industry
              industryToText(planDetail.industry)
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查方式:">{{
              planDetail.checkdType
              methodToText(planDetail.inspectionMethod)
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执行科室:">{{
              planDetail.executiveSection
              planDetail.applyDeptNames
            }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="检查内容:">{{
              planDetail.checkdContent
              planDetail.enforceContent
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
@@ -439,13 +470,13 @@
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划频率:">{{
              planDetail.planFrequency
            }}</el-form-item>
            <el-form-item label="计划频次:">
              {{ frequencyToText(planDetail) }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态:">{{
              planDetail.planStatus
              statusToText(planDetail.checkStatus)
            }}</el-form-item>
          </el-col>
        </el-row>
@@ -504,7 +535,7 @@
        <el-table-column
          type="selection"
          width="55"
          :reserve-selection="true"
          :reserve-selection="false"
        />
        <el-table-column prop="companyName" label="企业名称" />
        <el-table-column prop="companyCode" label="统一社会信用代码" />
@@ -521,6 +552,7 @@
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="closeSelect">确 定</el-button>
          <el-button @click="closeSelect">关 闭</el-button>
        </div>
      </template>
@@ -538,6 +570,7 @@
  delManage,
  exportTemplate,
  exportManage,
  getOrgId,
} from "@/api/system/manage";
import { listCompany } from "@/api/system/company/company";
import { deptTreeSelect } from "@/api/system/user";
@@ -551,6 +584,14 @@
  "industry_type",
  "inspection_method"
);
const statusOptions = ref([
  { label: "已撤回", value: -1 },
  { label: "待提交", value: 0 },
  { label: "已提交", value: 1 },
  { label: "已审批待执行", value: 2 },
  { label: "已执行待上报", value: 3 },
  { label: "已上报", value: 4 },
]);
const deptList = ref([]);
const open = ref(false);
const loading = ref(true);
@@ -567,18 +608,30 @@
const deptOptions = ref(undefined);
const selectOffices = ref([]);
const officeList = ref([]);
let checkedList = ref([]); // 选中的企业列表
import useUserStore from "@/store/modules/user";
import { get } from "http";
const userStore = useUserStore();
const userInfo = toRefs(userStore);
onMounted(() => {
  console.log("userInfo", userInfo.value);
});
const data = reactive({
  form: {
    planName: "", // 计划名称
    makeOrgId: "", // 制定机构id
    makeOrgName: "", // 制定机构
    executiveSection: "", // 执行科室
    executiveSectionName: "", // 执行科室名称
    checkdObject: [], // 被检查对象列表
    checkdIds: "", // 被检查对象id
    checkdType: "", // 检查方式
    enforceReason: "", // 计划名称
    applyOrgId: "", // 制定机构id
    applyOrgName: "", // 制定机构
    applyDeptIds: "", // 执行科室
    applyDeptNames: "", // 执行科室名称
    companyName: "", // 被检查对象
    companyId: "", // 被检查对象id
    companyCode: "", // 统一社会信用代码
    industry: "", // 所属行业
    checkdContent: "", // 检查内容
    inspectionMethod: "", // 检查方式
    enforceContent: "", // 检查内容
    planFrequency: "", // 计划频次
    planFrequencyUnit: "1", // 计划频次单位
    planMonth: "", // 计划月份
@@ -586,8 +639,8 @@
  queryParams: {
    orderType: 1,
    planNo: "",
    planName: "",
    executiveSection: "",
    enforceReason: "",
    applyDeptNames: "",
    value1: "",
    pageNum: 1,
    pageSize: 10,
@@ -595,25 +648,28 @@
  },
  rules: {
    planNo: [{ required: true, message: "计划编号不能为空", trigger: "blur" }],
    planName: [
    enforceReason: [
      { required: true, message: "计划名称不能为空", trigger: "blur" },
    ],
    makeOrgId: [
    applyOrgId: [
      { required: true, message: "制定计划的机构不能为空", trigger: "blur" },
    ],
    checkdIds: [
      { required: true, message: "被检查对象不能为空", trigger: "blur" },
    ],
    unifiedSocialCreditCode: [
    companyName: [
      { required: true, message: "企业名称不能为空", trigger: "blur" },
    ],
    companyCode: [
      { required: true, message: "统一社会信用代码不能为空", trigger: "blur" },
    ],
    industry: [
      { required: true, message: "所属行业不能为空", trigger: "blur" },
    ],
    checkdContent: [
    enforceContent: [
      { required: true, message: "检查内容不能为空", trigger: "blur" },
    ],
    executiveSection: [
    applyDeptIds: [
      { required: true, message: "执行科室不能为空", trigger: "blur" },
    ],
    planFrequency: [
@@ -622,10 +678,10 @@
    planMonth: [
      { required: true, message: "计划月份不能为空", trigger: "blur" },
    ],
    checkdType: [
    inspectionMethod: [
      { required: true, message: "检查方式不能为空", trigger: "blur" },
    ],
    planStatus: [{ required: true, message: "状态不能为空", trigger: "blur" }],
    checkStatus: [{ required: true, message: "状态不能为空", trigger: "blur" }],
  },
  firmQueryParams: {
    pageNum: 1,
@@ -641,7 +697,7 @@
  listDept({
    pageNum: 1,
    pageSize: 1000,
    parentId: form.value.makeOrgId,
    parentId: form.value.applyOrgId,
  }).then((response) => {
    officeList.value = response.data;
  });
@@ -656,16 +712,15 @@
// 计划月份选择
const changeMonth = (value) => {
  form.value.planMonth = value.join(",");
  console.log(form.value.planMonth);
};
// 机构选择
const changeTreeHandler = (e) => {
  form.value.makeOrgId = e.id;
  form.value.makeOrgName = e.label;
  form.value.applyOrgId = e.id;
  form.value.applyOrgName = e.label;
  selectOffices.value = [];
  form.value.executiveSection = "";
  form.value.executiveSectionName = "";
  form.value.applyDeptIds = "";
  form.value.applyDeptNames = "";
  if (e.id) {
    getOfficeList();
  }
@@ -673,12 +728,12 @@
// 科室选择
const handleSelectOffices = (value) => {
  form.value.executiveSectionName = value.map((item) => {
    return officeList.value.find((obj) => obj.deptId === item).deptName;
  }).join(",");
  form.value.executiveSection = value.join(",");
  console.log(form.value.executiveSection);
  console.log(form.value.executiveSectionName);
  form.value.applyDeptNames = value
    .map((item) => {
      return officeList.value.find((obj) => obj.deptId === item).deptName;
    })
    .join(",");
  form.value.applyDeptIds = value.join(",");
};
/*** 计划导入参数 */
@@ -749,23 +804,34 @@
/** 表单重置 */
function reset() {
  form.value = {
    planName: "", // 计划名称
    makeOrgId: "", // 制定机构id
    makeOrgName: "", // 制定机构
    executiveSection: "", // 执行科室
    executiveSectionName: "", // 执行科室名称
    checkdObject: [], // 被检查对象列表
    enforceReason: "", // 计划名称
    applyOrgId: "", // 制定机构id
    applyOrgName: "", // 制定机构
    applyDeptIds: "", // 执行科室id
    applyDeptNames: "", // 执行科室名称
    checkdIds: "", // 被检查对象id
    checkdType: "", // 检查方式
    companyName: "", // 被检查对象名称
    companyCode: "", // 统一社会信用代码
    inspectionMethod: "", // 检查方式
    industry: "", // 所属行业
    checkdContent: "", // 检查内容
    enforceContent: "", // 检查内容
    planFrequency: "", // 计划频次
    planFrequencyUnit: "", // 计划频次单位
    planFrequencyUnit: "1", // 计划频次单位
    planMonth: "", // 计划月份
    orderType: 1
    orderType: 1,
  };
  proxy.resetForm("deptRef");
  selectOffices.value = [];
  selectMonth.value = [];
  checkedList.value = [];
  proxy.$refs["deptRef"].clearValidate();
  proxy.$refs["deptRef"].resetFields();
}
function closeUpdHandler() {
  reset();
  open.value = false;
}
const queryRef = ref();
/** 搜索按钮操作 */
function handleQuery() {
@@ -777,17 +843,24 @@
  dateRange.value = [];
  queryParams.value = {
    planNo: "", // 计划编号
    planName: "", // 计划名称
    executiveSection: "", // 执法单位
    enforceReason: "", // 计划名称
    applyDeptIds: "", // 执行科室
    planMonthStart: "", // 计划开始月份
    planMonthEnd: "", // 计划结束月份
    orderType: 1
    orderType: 1,
  };
  handleQuery();
}
function getDetails(id) {
  getManage(id).then((response) => {
    form.value = response.data;
    form.value = JSON.parse(JSON.stringify(response.data));
    form.value.planFrequencyUnit = form.value.planFrequencyUnit.toString();
    selectMonth.value = form.value.planMonth.split(",");
    selectOffices.value = form.value.applyDeptIds
      .split(",")
      .map((item) => Number(item));
    getOfficeList();
    open.value = true;
  });
}
@@ -803,29 +876,40 @@
function handleAdd(row) {
  if (row) {
    title.value = "编辑计划";
    getDetails(row.id);
    getDetails(row.orderId);
  } else {
    title.value = "添加计划";
    open.value = true;
    getUserOrgId();
  }
  getFirmList();
}
/** 提交按钮 */
function submitForm() {
  console.log(form.value);
  proxy.$refs["deptRef"].validate((valid) => {
    if (valid) {
      if (form.value.id != undefined) {
      if (form.value.orderId != undefined) {
        updateManage(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
          reset();
        });
      } else {
        addManage(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        checkedList.value.forEach((item, index) => {
          const submitForm = { ...form.value };
          submitForm.companyId = item.companyId;
          submitForm.companyName = item.companyName;
          submitForm.companyCode = item.companyCode;
          addManage(submitForm).then((response) => {
            if (index === checkedList.value.length - 1) {
              proxy.$modal.msgSuccess("新增成功");
              open.value = false;
              getList();
              reset();
            }
          });
        });
      }
    }
@@ -885,21 +969,18 @@
function openFirmSelect() {
  selectOpen.value = true;
  getFirmList();
}
/** 查询企业列表 */
function getFirmList() {
  loading.value = true;
  listCompany(firmQueryParams.value).then((response) => {
    firmList.value = response.rows;
    firmQueryParams.value.total = response.total;
    loading.value = false;
  });
}
function handleSelectionChange(e) {
  form.value.checkdObject = e;
  checkedList.value = e;
  form.value.checkdIds = e.map((item) => item.companyId).join(",");
}
@@ -907,10 +988,40 @@
  selectOpen.value = false;
}
getList();
function selectableFun(e) {
  console.log(e);
function industryToText(industry) {
  return industry_type.value.find((item) => item.key === industry).label;
}
function methodToText(inspectionMethod) {
  return inspection_method.value.find((item) => item.key === inspectionMethod)
    .label;
}
function frequencyToText(data) {
  if (!data.planFrequencyUnit) {
    return "";
  }
  const unit = frequency.value.find(
    (item) => item.key == data.planFrequencyUnit
  ).label;
  return `${data.planFrequency}次/${unit}`;
}
function statusToText(status) {
  return statusOptions.value.find((item) => item.value === status).label;
}
function getUserOrgId() {
  getOrgId().then((response) => {
    form.value.applyOrgId = response.data || '';
    if (response.data) {
      getOfficeList();
    }
  });
}
getList();
function selectableFun(e) {}
</script>
<style scoped lang="scss">