feat: 添加页面ui实现

1 month ago · 6bf060fe12
2 changed files with 199 additions and 40 deletions
--- a/src/components/data/complaintformdialog.vue
+++ b/src/components/data/complaintformdialog.vue
@ -2,8 +2,8 @@
  <el-dialog
      :title="mode === 'add' ? '添加登记来件' : '修改登记来件'"
      v-model="visibleProxy"
-      width="80vw"
-      top="5vh"
+      width="70vw"
+      top="2vh"
      style="margin-bottom: 0"
  >
    <el-scrollbar max-height="76vh">
@ -15,8 +15,11 @@
          style="min-height: 66vh"
          :rules="rules"
      >
-        <!-- 来源 -->
-        <el-row>
+        <!-- 投诉信息 -->
+        <h2>投诉信息</h2>
+        <div class="add-negation-container">
+          <!-- 来源 -->
+          <el-row>
          <el-col :span="12">
            <el-form-item label="来源" prop="sourcePath">
              <el-cascader
@ -256,6 +259,63 @@
              tips="为便于“办理单位”更全面了解问题详情，请上传相关附件，如现场督察、数字督察等相关照片、视频及其他佐证材料。"
          />
        </el-form-item>
+        </div>
+
+        <!-- 办理单位 -->
+        <el-divider />
+        <h2>办理单位</h2>
+        <div class="add-negation-container">
+          <el-form-item label="主办层级" prop="hostLevel" :rules="{ required: true, message: '请选择主办层级', trigger: ['blur'] }">
+            <el-select style="width: 280px" v-model="model.hostLevel" @change="handleChangeHostLevel">
+              <el-option v-for="item in dict.hostLevel" :key="item.id" :label="item.dictLabel" :value="item.dictValue" />
+            </el-select>
+            <div class="tips mt-10">
+              <p>如主办层级 为 市局主办， 则由<span :data-active="model.hostLevel === HostLevel.FIRST">督察支队</span>办理；</p>
+              <p>如主办层级为 二级机构主办，则由<span :data-active="model.hostLevel === HostLevel.SECOND">督察部门</span>办理，可进一步下发；</p>
+              <p>如主办层级为 三级机构主办，则由<span :data-active="model.hostLevel === HostLevel.THREE">所队</span>办理。</p>
+            </div>
+          </el-form-item>
+          <el-form-item label="指定办理单位" prop="departId" :rules="{ required: true, message: '请选择办理单位', trigger: ['blur'] }">
+            <div class="flex gap">
+              <div style="width: 280px">
+                <template v-if="model.hostLevel === HostLevel.THREE">
+                  <depart-tree-select v-model="model.departId" v-loading="departLoading" />
+                </template>
+                <el-tree-select v-else :data="departs" :props="{ label: 'shortName', value: 'id' }" node-key="id" clearable filterable v-model="model.departId" @node-click="handleSelectDepart" check-strictly style="width: 280px" v-loading="departLoading" />
+              </div>
+              <el-button type="primary" @click="handleLinkDepart" text v-if="model.hostLevel !== HostLevel.FIRST">关联问题涉及单位</el-button>
+            </div>
+            <div class="tips mt-10">
+              <p>问题涉及单位 指与该问题相关的单位；</p>
+              <p>指定办理单位 指将问题分派给哪个单位办理。</p>
+            </div>
+          </el-form-item>
+        </div>
+
+        <!-- 办理时限 -->
+        <h2>办理时限</h2>
+        <div class="add-negation-container">
+          <el-form-item label="办理时限" prop="timeLimit" :rules="{ required: true, message: '请选择办理时限', trigger: ['blur'] }">
+            <time-limit-select v-model="model.timeLimit" v-model:maxSignDuration="model.maxSignDuration" v-model:maxHandleDuration="model.maxHandleDuration" v-model:maxExtensionDuration="model.maxExtensionDuration" />
+          </el-form-item>
+        </div>
+
+        <!-- 审批流程 -->
+        <h2>审批流程</h2>
+        <div class="add-negation-container">
+          <el-form-item label="审批流程" prop="approvalFlow" :rules="{ required: true, message: '请选择审批流程', trigger: ['blur'] }">
+            <el-radio-group v-model="model.approvalFlow" v-if="userStore.user.roleCodes.includes('admin_1')">
+              <el-radio v-for="item in dict.approvalFlow" :key="item.dictCode" :value="item.dictValue">{{ item.dictLabel }}{{ item.remark ? `(${item.remark})` : "" }}</el-radio>
+            </el-radio-group>
+            <el-radio-group v-model="model.approvalFlow" v-else>
+              <el-radio value="2">二级审批(所队一>二级机构)</el-radio>
+            </el-radio-group>
+            <div class="tips mt-10">
+              <p v-if="userStore.user.roleCodes.includes('admin_1')">三级审核　问题提交办结时，需经过"所队—>二级机构—>市局"三级审核，通过后方可办结；</p>
+              <p>二级审核　问题提交办结时，仅需经过"所队—>二级机构"两级审核，通过后即可办结；</p>
+            </div>
+          </el-form-item>
+        </div>
      </el-form>
    </el-scrollbar>

@ -292,11 +352,21 @@ import dayjs from "dayjs";
 import feedback from "@/utils/feedback.ts";
 import Complaint_detail from "@/components/data/complaint_detail.vue";
 import DuplicateDrawerWithDetail from "@/views/data/DuplicateDrawerWithDetail.vue";
+import useUserStore from "@/stores/modules/user.ts";
+import {secondList, listByFirstHost} from "@/api/system/depart";
+
+const HostLevel = {
+  FIRST: '1',
+  SECOND: '2',
+  THREE: '3'
+};
+
+const userStore = useUserStore();

 const props = defineProps({
-  modelValue: Boolean, // 控制弹窗显示
-  mode: { type: String, default: "add" }, // add | edit
-  model: { type: Object, required: true }, // addForm / updateForm
+  modelValue: Boolean,
+  mode: { type: String, default: "add" },
+  model: { type: Object, required: true },
  dict: { type: Object, required: true },
  rules: { type: Object, required: true },
 });
@ -309,11 +379,11 @@ const visibleProxy = computed({
  get: () => props.modelValue,
  set: (v) => emit("update:modelValue", v),
 });
+
 watch(
    () => visibleProxy.value,
    (v) => {
      if (v) {
-        // 打开弹窗时，统一重置所有 “无” 勾选状态
        props.model.originIdSkip = false
        props.model.responderNameSkip = false
        props.model.responderIdCodeSkip = false
@ -326,12 +396,61 @@ watch(
        duplicateCount.value = 0
        duplicateCache.value = []
        duplicateList.value = []
+
+        getDeparts()
      }
    }
-)
+);
+
+watch(
+    () => props.model.hostLevel,
+    () => {
+      getDeparts();
+    }
+);

+const departs = ref([]);
+const departLoading = ref(false);
+async function getDeparts() {
+  if (!props.model.hostLevel) return;
+  departLoading.value = true;
+  try {
+    if (props.model.hostLevel === HostLevel.FIRST) {
+      departs.value = await listByFirstHost();
+    } else if (props.model.hostLevel === HostLevel.SECOND) {
+      departs.value = await secondList();
+    } else {
+      departs.value = [];
+    }
+  } catch (e) {
+    console.error(e);
+  } finally {
+    departLoading.value = false;
+  }
+}
+
+function handleSelectDepart(row) {
+  props.model.departName = row.shortName;
+}
+
+function handleLinkDepart() {
+  if (props.model.hostLevel === HostLevel.SECOND) {
+    feedback.msgWarning("当前选择二级机构主办，指定办理单位请选择二级机构！");
+    return;
+  }
+  props.model.departId = props.model.secondDepartId;
+  props.model.departName = props.model.secondDepartName;
+}
+
+function handleChangeHostLevel(val) {
+  if (val === HostLevel.FIRST) {
+    props.model.departId = "";
+  }
+  if (val === HostLevel.SECOND) {
+    props.model.approvalFlow = "3";
+  }
+}

-// 级联选择 -> 拆字段（和你现在 addForm 的 watch 一样）
 watch(
    () => props.model.sourcePath,
    (path) => {
@ -353,7 +472,6 @@ function fillFiledName() {

 async function onSubmit() {
  fillFiledName();
-  // await formRef.value.validate();
  emit("submit");
 }

@ -365,9 +483,8 @@ const onCheckDuplicate = async () => {
  duplicateDrawerVisible.value = true
 }

-// region 自动查重相关
-const duplicateCount = ref(0)      // 只存数量
-const duplicateCache = ref([])     // 缓存完整列表
+const duplicateCount = ref(0)
+const duplicateCache = ref([])
 const autoDuplicateLoading = ref(false)
 const duplicateHintVisible = ref(false)

@ -400,19 +517,14 @@ const onAutoCheckDuplicate = async () => {
    duplicateCount.value = list.length
    duplicateCache.value = list
  } catch (e) {
-    // 静默失败（也可以在这里把提示变成“查重失败”）
  } finally {
    autoDuplicateLoading.value = false
  }
 }

-
-
-// endregion
-
 </script>

-<style>
+<style lang="scss" scoped>
 .form-layout {
  padding: 0 34px;
 }
@ -421,13 +533,35 @@ const onAutoCheckDuplicate = async () => {
  padding: 16px 24px 24px;
 }

+.add-negation-container {
+  padding: 0 60px;
+}
+
+.tips {
+  margin-top: 10px;
+
+  [data-active="true"] {
+    color: var(--danger-color);
+  }
+}
+
+:deep() {
+  .el-form-item__content {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .block.el-radio-group {
+    display: block;
+  }
+  .block.el-radio-group .el-radio {
+    display: block;
+  }
+}

-/* 重复件抽屉整体 */
 .duplicate-drawer {
  --el-drawer-padding-primary: 20px;
 }

-/* 抽屉标题 */
 .drawer-header {
  display: flex;
  align-items: center;
@ -437,17 +571,14 @@ const onAutoCheckDuplicate = async () => {
  color: #d46b08;
 }

-/* 内容区域 */
 .drawer-body {
  padding-top: 8px;
 }

-/* 顶部提示 */
 .drawer-alert {
  margin-bottom: 16px;
 }

-/* 身份证号高亮 */
 .id-highlight {
  margin-bottom: 20px;
  padding: 12px 16px;
@ -463,14 +594,6 @@ const onAutoCheckDuplicate = async () => {
  color: #d4380d;
 }

-
-.drawer-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 4px 0;
-}
-
 .drawer-header.danger {
  color: #0d73ee;
 }
@ -492,4 +615,10 @@ const onAutoCheckDuplicate = async () => {
  margin-top: 2px;
 }

+h2 {
+  margin: 16px 0 8px;
+  padding-left: 60px;
+  font-size: 16px;
+  font-weight: 600;
+}
 </style>
--- a/src/views/data/ComplaintCollection.vue
+++ b/src/views/data/ComplaintCollection.vue
@ -529,6 +529,17 @@ const createEmptyAddForm = () => ({
  tags: [],
  handleMethod: '',
  thingFiles: [],
+  // 办理单位相关字段
+  hostLevel: '3',
+  departId: '',
+  departName: '',
+  // 办理时限相关字段
+  timeLimit: '',
+  maxSignDuration: null,
+  maxHandleDuration: null,
+  maxExtensionDuration: null,
+  // 审批流程
+  approvalFlow: '',
 });
 const addShow = ref(false);
 const addForm = ref(createEmptyAddForm());
@ -562,18 +573,15 @@ const addRules = {
  sourcePath: [
    {required: true, message: "请选择来源（一级/二级）", trigger: "change"},
  ],
-  // originId: [{required: true, message: '请输入编号', trigger: 'blur'}],
  discoveryTime: [{required: true, message: '请选择受理时间', trigger: 'change'}],
-  // responderName: [{required: true, message: '请输入来件人姓名', trigger: 'blur'}],
-  // responderIdCode: [{required: true, message: '请输入身份证号码', trigger: 'blur'}],
-  // responderPhone: [{required: true, message: '请输入联系电话', trigger: 'blur'}],
  secondDepartId: [{required: true, message: '请选择被投诉二级机构', trigger: 'change'}],
  thingDesc: [{required: true, message: '请输入来件内容', trigger: 'blur'}],
  involveProblemIdList: [{required: true, message: '请选择涉嫌问题', trigger: 'change'}],
  repeatt: [{required: true, message: '请选择是否重复件', trigger: 'change'}],
-  // leadApproval: [{required: true, message: '请选择是否领导批示', trigger: 'change'}],
-  // tags: [{required: true, message: '请选择标签', trigger: 'change'}],
-  // handleMethod: [{required: true, message: '请选择办理方式', trigger: 'change'}],
+  hostLevel: [{required: true, message: '请选择主办层级', trigger: 'change'}],
+  departId: [{required: true, message: '请选择办理单位', trigger: 'change'}],
+  timeLimit: [{required: true, message: '请选择办理时限', trigger: 'change'}],
+  approvalFlow: [{required: true, message: '请选择审批流程', trigger: 'change'}],
 }
 watch(
    () => addForm.value.sourcePath,
@ -609,6 +617,17 @@ const updateForm = ref({
  involveProblemIdList: [],
  tags: [],
  thingFiles: [],
+  // 办理单位相关字段
+  hostLevel: '3',
+  departId: '',
+  departName: '',
+  // 办理时限相关字段
+  timeLimit: '',
+  maxSignDuration: null,
+  maxHandleDuration: null,
+  maxExtensionDuration: null,
+  // 审批流程
+  approvalFlow: '',
 })

 function normalizeThingFiles(val) {
@ -670,6 +689,17 @@ const handleUpdate = async (row) => {
      percent: 100,
      uid: f.uid || `${f.filePath}-${Math.random()}`,
    })),
+    // 办理单位相关字段
+    hostLevel: r.hostLevel ?? '3',
+    departId: r.departId ?? '',
+    departName: r.departName ?? '',
+    // 办理时限相关字段
+    timeLimit: r.timeLimit ?? '',
+    maxSignDuration: r.maxSignDuration ?? null,
+    maxHandleDuration: r.maxHandleDuration ?? null,
+    maxExtensionDuration: r.maxExtensionDuration ?? null,
+    // 审批流程
+    approvalFlow: r.approvalFlow ?? '',
  };
  updateShow.value = true
 }