sgxt_web/src/views/backOfficeSystem/PoliceIncidentMonitoring/addForm.vue

<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>