bl-common-vue3 3.8.127 → 3.8.128

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bl-common-vue3",
-  "version": "3.8.127",
+  "version": "3.8.128",
   "main": "index.js",
   "module": "index.js",
   "description": "bailing vue3 common components lib",

package/src/components/VillageConfigSetting/index.vue

@@ -0,0 +1,402 @@
+<template>
+  <bl-modal
+    :title="title"
+    :visible="visible"
+    :width="width"
+    :destroyOnClose="true"
+    :bodyStyle="modalBodyStyle"
+    centered
+    @cancel="close"
+    @ok="save"
+    :confirmLoading="saving"
+  >
+    <div class="village-config-setting">
+      <div class="village-config-setting__tree">
+        <div class="village-config-setting__tree-content">
+          <VillageTree
+            v-bind="villageTreeProps"
+            @getCurrent="getCurrentSelect"
+            @request="handleTreeRequest"
+          />
+        </div>
+      </div>
+      <div class="village-config-setting__content">
+        <a-spin :spinning="loading">
+          <slot
+            :formData="formData"
+            :villageId="villageId"
+            :loading="loading"
+            :saving="saving"
+            :isCommonConfig="isCommonConfig"
+            :reload="loadConfig"
+            :save="save"
+            :request="request"
+          />
+        </a-spin>
+      </div>
+    </div>
+  </bl-modal>
+</template>
+
+<script>
+import { computed, defineComponent, reactive, toRefs, watch } from "vue";
+import { message, Spin } from "ant-design-vue";
+import { cloneDeep } from "lodash";
+import BlModal from "../BlModal/index.vue";
+import VillageTree from "../VillageTree/index.vue";
+import { t } from "../../locale";
+
+const DEFAULT_MODAL_BODY_STYLE = {
+  padding: 0,
+  height: "46vh",
+};
+
+const cloneData = (data = {}) => {
+  if (!data || typeof data !== "object") {
+    return {};
+  }
+  return cloneDeep(data);
+};
+
+export default defineComponent({
+  name: "VillageConfigSetting",
+  components: {
+    BlModal,
+    VillageTree,
+    "a-spin": Spin,
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    // 配置分类。为空时保持 /apartment/config 的旧逐字段存储方式。
+    configKey: {
+      type: String,
+      default: "",
+    },
+    // 配置接口。默认值兼容现有公寓参数接口，其他模块可传入自己的接口。
+    api: {
+      type: Object,
+      default: () => ({
+        server: "/village",
+        get: "/apartment/config",
+        save: "/apartment/config",
+      }),
+    },
+    // 接口未返回整份配置时使用的前端默认值。
+    defaultFormData: {
+      type: Object,
+      default: () => ({}),
+    },
+    villageId: {
+      type: [Number, String],
+      default: 0,
+    },
+    roomTypeList: {
+      type: Array,
+      default: () => [],
+    },
+    display: {
+      type: Number,
+      default: 1,
+    },
+    treeProps: {
+      type: Object,
+      default: () => ({}),
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    width: {
+      type: [Number, String],
+      default: 800,
+    },
+    bodyStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    normalizeFormData: {
+      type: Function,
+      default: (data) => data,
+    },
+    formatSubmitData: {
+      type: Function,
+      default: (data) => data,
+    },
+  },
+  emits: ["cancel", "success", "loaded", "error", "request", "village-change"],
+  setup(props, { emit }) {
+    const state = reactive({
+      formData: cloneData(props.defaultFormData),
+      villageId: props.villageId || "common",
+      loading: false,
+      saving: false,
+    });
+
+    const modalBodyStyle = computed(() => ({
+      ...DEFAULT_MODAL_BODY_STYLE,
+      ...props.bodyStyle,
+    }));
+
+    const villageTreeProps = computed(() => ({
+      roomType: props.roomTypeList,
+      display: props.display,
+      showCompany: true,
+      isdisabledNumber: 1,
+      onlyVillage: true,
+      prependTreeNodes: [{
+        id: "common",
+        key: "common-config",
+        title: t("VillageConfigSetting.index.000001-0"),
+        childType: "commonConfig",
+        isLeaf: true,
+      }],
+      defaultSelectedKey: props.villageId ? "" : "common-config",
+      refreshParams: props.villageId ? {
+        villageId: props.villageId,
+        selected: { villageId: props.villageId },
+      } : undefined,
+      ...props.treeProps,
+    }));
+
+    const isCommonConfig = computed(() => state.villageId === "common");
+
+    const apiConfig = computed(() => ({
+      server: "/village",
+      get: "/apartment/config",
+      save: "/apartment/config",
+      ...props.api,
+    }));
+
+    const request = ({ method, server, url, extra = {} }) => {
+      return new Promise((resolve, reject) => {
+        emit("request", {
+          params: { method, server, url, extra },
+          success: resolve,
+          fail: reject,
+        });
+      });
+    };
+
+    const setFormData = (data = {}) => {
+      if (!data || typeof data !== "object" || !Object.keys(data).length) {
+        state.formData = cloneData(props.defaultFormData);
+        return;
+      }
+      const normalizedData = props.normalizeFormData(data) || {};
+      state.formData = normalizedData && typeof normalizedData === "object"
+        ? {
+          ...cloneData(props.defaultFormData),
+          ...cloneData(normalizedData),
+        }
+        : cloneData(props.defaultFormData);
+    };
+
+    const loadConfig = async () => {
+      if (!state.villageId) {
+        return;
+      }
+
+      state.loading = true;
+      try {
+        const extra = {
+          village_id: state.villageId,
+        };
+        if (props.configKey) {
+          extra.configKey = props.configKey;
+        }
+        const res = await request({
+          method: "get",
+          server: apiConfig.value.server,
+          url: apiConfig.value.get,
+          extra,
+        });
+        setFormData(res?.list || {});
+        emit("loaded", cloneData(state.formData));
+      } catch (error) {
+        emit("error", error);
+      } finally {
+        state.loading = false;
+      }
+    };
+
+    const changeVillage = async (villageId) => {
+      if (!villageId) {
+        return;
+      }
+      state.villageId = villageId;
+      emit("village-change", {
+        villageId,
+      });
+      if (props.visible) {
+        await loadConfig();
+      }
+    };
+
+    const getCurrentSelect = async (info) => {
+      const current = info?.current || {};
+      if (current.childType === "commonConfig") {
+        await changeVillage("common");
+        return;
+      }
+      if (current.childType !== "village") {
+        return;
+      }
+      await changeVillage(current.id);
+    };
+
+    watch(
+      () => props.villageId,
+      (villageId) => {
+        if (villageId) {
+          changeVillage(villageId);
+        }
+      },
+      { immediate: true },
+    );
+
+    watch(
+      () => props.visible,
+      (visible) => {
+        if (visible) {
+          if (props.villageId) {
+            state.villageId = props.villageId;
+          } else if (!state.villageId) {
+            state.villageId = "common";
+          }
+          if (state.villageId) {
+            loadConfig();
+          }
+        }
+      },
+    );
+
+    const handleTreeRequest = ({ params, success, fail }) => {
+      request(params)
+        .then((res) => {
+          if (typeof success === "function") {
+            success(res);
+          }
+        })
+        .catch((error) => {
+          if (typeof fail === "function") {
+            fail(error);
+          }
+        });
+    };
+
+    const close = () => {
+      state.villageId = "";
+      state.loading = false;
+      state.saving = false;
+      setFormData();
+      emit("cancel");
+    };
+
+    const save = async () => {
+      if (!state.villageId || state.saving) {
+        return;
+      }
+
+      state.saving = true;
+      try {
+        const params = {
+          village_id: state.villageId,
+          param: props.formatSubmitData(cloneData(state.formData)),
+        };
+        if (props.configKey) {
+          params.configKey = props.configKey;
+        }
+        const res = await request({
+          method: "put",
+          server: apiConfig.value.server,
+          url: apiConfig.value.save,
+          extra: params,
+        });
+        message.success(res?.msg || t("common.action.success"));
+        emit("success", {
+          villageId: state.villageId,
+          formData: cloneData(state.formData),
+          response: res,
+        });
+        close();
+      } catch (error) {
+        emit("error", error);
+      } finally {
+        state.saving = false;
+      }
+    };
+
+    return {
+      ...toRefs(state),
+      modalBodyStyle,
+      villageTreeProps,
+      isCommonConfig,
+      request,
+      loadConfig,
+      getCurrentSelect,
+      handleTreeRequest,
+      close,
+      save,
+      t,
+    };
+  },
+});
+</script>
+
+<style scoped lang="less">
+.village-config-setting {
+  box-sizing: border-box;
+  display: flex;
+  height: 100%;
+  padding: 10px;
+  gap: 10px;
+  background: #f0f2f5;
+
+  &__tree,
+  &__content {
+    min-width: 0;
+    height: 100%;
+    padding: 10px;
+    background: #fff;
+  }
+
+  &__tree {
+    display: flex;
+    flex-direction: column;
+    width: 260px;
+    flex: 0 0 260px;
+  }
+
+  &__tree-content {
+    min-height: 0;
+    flex: 1;
+  }
+
+  &__content {
+    flex: 1;
+    overflow-y: auto;
+  }
+}
+
+@media (max-width: 767px) {
+  .village-config-setting {
+    flex-direction: column;
+    overflow-y: auto;
+
+    &__tree {
+      width: 100%;
+      height: 180px;
+      flex-basis: 180px;
+    }
+
+    &__content {
+      height: auto;
+      min-height: 260px;
+      overflow-y: visible;
+    }
+  }
+}
+</style>

package/src/components/VillageTree/index.vue

@@ -167,6 +167,21 @@ export default defineComponent({
     buildLevelCanSelectFirst:{
       type:Boolean,
       default:false
+    },
+    // 配置树仅允许选择项目节点和自定义配置节点。
+    onlyVillage: {
+      type: Boolean,
+      default: false,
+    },
+    // 在项目树前追加的自定义节点。
+    prependTreeNodes: {
+      type: Array,
+      default: () => [],
+    },
+    // 初始化时默认选中的节点 key。
+    defaultSelectedKey: {
+      type: String,
+      default: "",
     }
   },
   components: {
@@ -200,6 +215,9 @@ export default defineComponent({
     /** 点击选中当前项 */
     const onTreeSelect = (value, e) => {
       const current = e.node.dataRef;
+      if (props.onlyVillage && !["village", "commonConfig"].includes(current.childType)) {
+        return;
+      }
       let levelList =['department','buildLevel']
       if (props.showCompany) {
         levelList = ['buildLevel']
@@ -494,6 +512,9 @@ export default defineComponent({
           listItem.title = listItem.name;
           listItem.level = level;
           listItem.slotIcon = `${listItem.childType}Icon`;
+          if (props.onlyVillage) {
+            listItem.disabled = true;
+          }
           listItem.children = [];
           if (listItem.subcat && listItem.subcat.length) {
             listItem.children = getDeptTreeList(
@@ -512,7 +533,7 @@ export default defineComponent({
             );
             listItem.children = [...listItem.children, ...villageList];
           }else{
-            if (props.showCompany) {
+            if (props.showCompany && !props.onlyVillage) {
               listItem.noVillage = 1
               setSelected(listItem);
             }
@@ -642,7 +663,7 @@ export default defineComponent({
           } else {
             if (props.showCompany) {
                parentData.noVillage = 0
-              if (!props.setFirst){
+              if (!props.setFirst && !props.onlyVillage){
                 setSelected(parentData);
               }
             }else{
@@ -694,12 +715,20 @@ export default defineComponent({
           const totalVillageCount = res.list
             ? getVillageCount(res.list)
             : res.villageList?.length || 0;
-          state.treeList = res.list
+          const villageTree = res.list
             ? getDeptTreeList(res.list, 1, totalVillageCount)
             : getVillageTreeList(res.villageList, 1, {}, totalVillageCount);
+          state.treeList = [...props.prependTreeNodes, ...villageTree];
           state.loadingTree = false;
-          state.treeList[0].disabled = props.isdisabledNumber ? true : false
-          if (props.setFirst&&state.treeList.length&&state.treeList[0].children){
+          if (state.treeList[0] && !props.prependTreeNodes.length) {
+            state.treeList[0].disabled = props.isdisabledNumber ? true : false;
+          }
+          const defaultSelectedNode = props.defaultSelectedKey
+            ? state.treeList.find((item) => item.key === props.defaultSelectedKey)
+            : undefined;
+          if (defaultSelectedNode) {
+            setSelected(defaultSelectedNode);
+          } else if (props.setFirst&&state.treeList.length&&state.treeList[0].children){
             setSelected(state.treeList[0].children[0])
           }
           let buildList = getBuildCount(state.treeList, []);

package/src/components/components.js

@@ -13,6 +13,7 @@ export { default as SelectProperty } from "./SelectProperty/index.vue";
 export { default as ChooseHousingResources } from "./ChooseHousingResources/index.vue";
 export { default as CheckedHousingResources } from "./CheckedHousingResources/index.vue";
 export { default as VillageTree } from "./VillageTree/index.vue"; //该组件只能用于侧边栏筛选，或者无编辑（不用回显的情况，有导入的情况就没有对应的key导致回显失败）
+export { default as VillageConfigSetting } from "./VillageConfigSetting/index.vue";
 export { default as UserDetail } from "./UserDetail/index.vue";
 export { default as BlIcon } from "./BLIcon/index.js";
 export { default as ViewEnergyList } from "./ViewEnergyList/index.vue";

package/src/locale/local/cht.json

@@ -536,5 +536,6 @@
   "PreviewFile.printModal.success": "發送成功",
   "PreviewFile.download": "文件下載",
   "PreviewFile.print": "列印文件",
-  "PreviewFile.defaultTitle": "預覽文件"
+  "PreviewFile.defaultTitle": "預覽文件",
+  "VillageConfigSetting.index.000001-0": "公共配置"
 }

package/src/locale/local/en.json

@@ -536,5 +536,6 @@
   "PreviewFile.printModal.success": "Sent",
   "PreviewFile.download": "Download File",
   "PreviewFile.print": "Print File",
-  "PreviewFile.defaultTitle": "Preview File"
+  "PreviewFile.defaultTitle": "Preview File",
+  "VillageConfigSetting.index.000001-0": "Public configuration"
 }

package/src/locale/local/jp.json

@@ -536,5 +536,6 @@
   "PreviewFile.printModal.success": "送信しました",
   "PreviewFile.download": "ファイルダウンロード",
   "PreviewFile.print": "ファイル印刷",
-  "PreviewFile.defaultTitle": "ファイルをプレビュー"
+  "PreviewFile.defaultTitle": "ファイルをプレビュー",
+  "VillageConfigSetting.index.000001-0": "共通設定"
 }

package/src/locale/local/zh-HK.json

@@ -536,5 +536,6 @@
   "PreviewFile.printModal.success": "發送成功",
   "PreviewFile.download": "文件下載",
   "PreviewFile.print": "列印文件",
-  "PreviewFile.defaultTitle": "預覽文件"
+  "PreviewFile.defaultTitle": "預覽文件",
+  "VillageConfigSetting.index.000001-0": "公共配置"
 }

package/src/locale/local/zh.json

@@ -536,5 +536,6 @@
   "PreviewFile.printModal.success": "发送成功",
   "PreviewFile.download": "文档下载",
   "PreviewFile.print": "文档打印",
-  "PreviewFile.defaultTitle": "预览文档"
+  "PreviewFile.defaultTitle": "预览文档",
+  "VillageConfigSetting.index.000001-0": "公共配置"
 }