lcw

src/views/backOfficeSystem/PoliceIncidentMonitoring/addForm.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="dialog" v-if="dialogForm">
+    <div class="head_box">
+      <span class="title">{{ title }}警情监测</span>
+      <div>
+        <el-button type="primary" size="small" v-if="!disabled" :loading="loading" @click="submit">保存</el-button>
+        <el-button size="small" @click="close">关闭</el-button>
+      </div>
+    </div>
+    <div class="form_cnt">
+      <FormMessage ref="elform" :disabled="disabled" v-model="listQuery" :formList="formData" labelWidth="100px"
+        :rules="rules">
+        <template #jqzldm>
+            <el-cascader v-model="listQuery.jqzldm" :options="props.dict.jqTree" clearable filterable :show-all-levels="false" :props="{label: 'zdmc', value: 'dm', children: 'itemList',checkStrictly: true }" />
+        </template>
+      </FormMessage>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import * as rule from "@/utils/rules.js";
+import FormMessage from "@/components/aboutTable/FormMessage.vue";
+import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
+import { ref, defineExpose, reactive, onMounted, defineEmits, getCurrentInstance, watch, onUnmounted } from "vue";
+const emit = defineEmits(["getList"]);
+const props = defineProps({
+  dict: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+const { proxy } = getCurrentInstance();
+const dialogForm = ref(false); //弹窗
+const rules = reactive({
+  // jqgjz: [{ required: true, message: "请输入内容关键字", trigger: "blur" }],
+  //   gzms: [{ required: true, message: "请输入规则描述", trigger: "blur" }],
+  // jqzldm: [{ required: true, message: "请选择警情子类", trigger: "blur" }],
+  // jqdjdm: [{ required: true, message: "请选择警情等级", trigger: "blur" }],
+});
+const listQuery = ref({}); //表单
+const formData = ref();
+const loading = ref(false);
+const elform = ref();
+const title = ref("");
+const disabled = ref(false);
+
+// 初始化数据
+const init = (type, row) => {
+  title.value = type == 'edit' ? '编辑' : type == 'add' ? '新增' : '详情'
+  dialogForm.value = true;
+
+  formData.value = [
+    { label: "警情等级", prop: "jqdjdm", type: "select", options: props.dict.D_BZ_JQDJ || [] },
+    { label: "警情子类", prop: "jqzldm", type: "slot" },
+    { label: "内容关键字", prop: "jqgjz", type: "textarea", width: "100%" },
+    { label: "规则描述", prop: "gzms", type: "textarea", width: "100%" },
+  ]
+  if (type != 'add') {
+    // 处理级联选择器的回显
+    if (row.jqzldm && props.dict.jqTree) {
+      const fullPath = findFullPath(props.dict.jqTree, row.jqzldm);
+      if (fullPath.length > 0) {
+        listQuery.value = {
+          ...row,
+          jqzldm: fullPath
+        };
+      } else {
+        listQuery.value = row;
+      }
+    } else {
+      listQuery.value = row;
+    }
+    if (type == 'detail') {
+      disabled.value = true;
+    } else {
+      disabled.value = false;
+    }
+  }
+
+};
+
+// 查找完整的级联路径
+const findFullPath = (tree, targetValue, currentPath = []) => {
+  for (const node of tree) {
+    const newPath = [...currentPath, node.dm];
+    if (node.dm === targetValue) {
+      return newPath;
+    }
+    if (node.itemList && node.itemList.length > 0) {
+      const result = findFullPath(node.itemList, targetValue, newPath);
+      if (result.length > 0) {
+        return result;
+      }
+    }
+  }
+  return [];
+};
+// 提交
+const submit = () => {
+  // 处理级联选择器的值，只提交最后一个值
+  const promes = {
+    ...listQuery.value,
+    jqzldm: Array.isArray(listQuery.value.jqzldm) ? listQuery.value.jqzldm[listQuery.value.jqzldm.length - 1] : listQuery.value.jqzldm
+  }
+  elform.value.submit((data) => {
+    loading.value = true;
+    if (title.value == "新增") {
+      qcckPost(promes, '/mosty-gsxt/jqjczg/addEntity').then(() => {
+        proxy.$message({ type: "success", message: title.value + "成功" });
+        emit("getList");
+        close();
+      }).catch(() => {
+      }).finally(() => {
+        loading.value = false;
+      });
+    } else {
+      qcckPut(promes, '/mosty-gsxt/jqjczg/editEntity').then(() => {
+        proxy.$message({ type: "success", message: title.value + "成功" });
+        emit("getList");
+        close();
+      }).catch(() => {
+      }).finally(() => {
+        loading.value = false;
+      });
+    }
+
+  });
+};
+// 关闭
+const close = () => {
+  listQuery.value = {};
+  dialogForm.value = false;
+  loading.value = false;
+};
+
+
+
+
+onUnmounted(() => {
+})
+defineExpose({ init });
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+
+::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
+  color: #0072ff;
+  background: rgba(0, 114, 255, 0.3);
+}
+
+.boxlist {
+  width: calc(99% - 50px);
+  margin-top: 10px;
+  overflow: hidden;
+}
+
+.depBox {
+  border: 1px solid #e9e9e9;
+  padding: 0 0 0 4px;
+  border-radius: 4px;
+  width: 100%;
+
+  .coolor {
+    color: #d3d3d3;
+  }
+
+}
+
+.zdy-taf {
+  width: 100%;
+  width: 100%;
+  min-height: 32px;
+  border: 1px solid #e9e9e9;
+  border-radius: 4px;
+  padding: 0px 5px;
+  box-sizing: border-box;
+}
+
+.map {
+  height: 520px;
+  margin-top: 10px;
+}
+</style>