涉访涉诉--添加修改封装为组件

src/components/data/complaintformdialog.vue

@@ -0,0 +1,207 @@
+<template>
+  <el-dialog
+      :title="mode === 'add' ? '添加登记来件' : '修改登记来件'"
+      v-model="visibleProxy"
+      width="80vw"
+      top="5vh"
+      style="margin-bottom: 0"
+  >
+    <el-scrollbar max-height="76vh">
+      <el-form
+          ref="formRef"
+          :model="model"
+          :label-width="120"
+          style="min-height: 66vh"
+          :rules="rules"
+      >
+        <!-- 来源 -->
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="来源" prop="sourcePath">
+              <el-cascader
+                  v-model="model.sourcePath"
+                  :options="dict.sourceTableAndLevel"
+                  :props="{ emitPath: true, checkStrictly: true }"
+                  clearable
+                  filterable
+                  show-all-levels
+                  style="width: 100%"
+                  placeholder="请选择来源（一级/二级）"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- 编号 + 受理时间 -->
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="编号" prop="originId">
+              <el-input
+                  v-model="model.originId"
+                  placeholder="请输入编号"
+                  :disabled="mode === 'edit' || model.originIdSkip"
+              />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="受理时间" prop="discoveryTime">
+              <el-date-picker
+                  v-model="model.discoveryTime"
+                  type="datetime"
+                  placeholder="请选择"
+                  value-format="YYYY-MM-DDTHH:mm:ss"
+                  format="YYYY-MM-DD HH:mm:ss"
+                  style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- 来件人姓名 + 身份证号码 -->
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="来件人姓名" prop="responderName">
+              <el-input v-model="model.responderName" placeholder="请输入来件人姓名" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="身份证号码" prop="responderIdCode">
+              <el-input v-model="model.responderIdCode" placeholder="请输入身份证号码" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- 联系电话 + 被投诉二级机构 -->
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="联系电话" prop="responderPhone">
+              <el-input v-model="model.responderPhone" placeholder="请输入联系电话" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="被投诉二级机构" prop="secondDepartId" label-width="140px">
+              <depart-tree-select
+                  v-model="model.secondDepartId"
+                  :check-strictly="true"
+                  @node-click="(row) => (model.secondDepartName = row.shortName)"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- 来件内容 -->
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="来件内容" prop="thingDesc">
+              <el-input v-model="model.thingDesc" type="textarea" :autosize="{ minRows: 4 }" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- 涉嫌问题 + 是否重复件 -->
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="涉嫌问题" prop="involveProblemIdList">
+              <el-select v-model="model.involveProblemIdList" multiple clearable style="width: 100%">
+                <el-option
+                    v-for="item in dict.suspectProblem"
+                    :key="item.dictValue"
+                    :value="item.dictValue"
+                    :label="item.dictLabel"
+                >
+                  <!-- 复选框展示 -->
+                  <el-checkbox :model-value="model.involveProblemIdList.includes(item.dictValue)">
+                    {{ item.dictLabel }}
+                  </el-checkbox>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="是否重复件" prop="repeatt">
+              <el-radio-group v-model="model.repeatt" clearable>
+                <el-radio v-for="item in dict.yesNo" :key="item.id" :label="item.dictValue">
+                  {{ item.dictLabel }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- 标签 -->
+        <el-row>
+          <el-col :span="18">
+            <el-form-item label="标签" prop="tags">
+              <el-checkbox-group v-model="model.tags">
+                <el-checkbox v-for="item in dict.tagList" :key="item.id" :label="item.dictValue">
+                  {{ item.dictLabel }}
+                </el-checkbox>
+              </el-checkbox-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- 办理方式 -->
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="办理方式" prop="handleMethod">
+              <el-radio-group v-model="model.handleMethod" clearable>
+                <el-radio v-for="item in dict.handleMethodType" :key="item.id" :label="item.dictValue">
+                  {{ item.dictLabel }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-scrollbar>
+
+    <template #footer>
+      <el-button @click="visibleProxy = false" size="large">取消</el-button>
+      <el-button type="primary" @click="onSubmit" size="large">
+        {{ mode === 'add' ? '添加' : '修改' }}
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { computed, ref, watch } from "vue";
+
+const props = defineProps({
+  modelValue: Boolean, // 控制弹窗显示
+  mode: { type: String, default: "add" }, // add | edit
+  model: { type: Object, required: true }, // addForm / updateForm
+  dict: { type: Object, required: true },
+  rules: { type: Object, required: true },
+});
+
+const emit = defineEmits(["update:modelValue", "submit"]);
+
+const formRef = ref();
+
+const visibleProxy = computed({
+  get: () => props.modelValue,
+  set: (v) => emit("update:modelValue", v),
+});
+
+// 级联选择 -> 拆字段（和你现在 addForm 的 watch 一样）
+watch(
+    () => props.model.sourcePath,
+    (path) => {
+      if (!path || path.length === 0) return;
+      props.model.sourceTable = (path && path[0]) || "";
+      props.model.sourceTableSubOne = (path && path[1]) || "";
+    },
+    { deep: true }
+);
+
+async function onSubmit() {
+  await formRef.value.validate();
+  emit("submit");
+}
+</script>