form-select

src/components/scTable/helper.js

@@ -29,32 +29,10 @@ export const mapFormItemSelect = (field, title, config = {}) => ({
     titlePrefix: { content: title, icon: "vxe-icon-question-circle-fill" },
     itemRender: {
         name: "$form-select",
-        props: { popperClass: "vxe-table-slot--popper", filterable: true, clearable: true, placeholder: `请选择${title}`, ...XEUtils.get(config, "props") },
-        api: {
-            key: XEUtils.get(config, "api.key", null),
-            query: XEUtils.get(config, "api.query", {}),
-            expands: XEUtils.get(config, "api.expands", {})
-        }, 
-        ...XEUtils.omit(config, "props", "api")
-    },
-    ...config
-})
-
-/**
- * 单选配置
- * @param field 字段
- * @param title 标题
- * @param config 其他配置
- */
-export const mapFormItemRadio = (field, title, config = {}) => ({
-    field,
-    title,
-    titlePrefix: { content: title, icon: "vxe-icon-question-circle-fill" },
-    itemRender: {
-        name: "$form-radio",
-        ...config
+        props: { popperClass: "vxe-table-slot--popper", filterable: true, clearable: true, placeholder: `请选择${title}`, ...XEUtils.pick(config, "props") },
+        ...XEUtils.omit(config, "props")
     },
-    ...config
+    ...XEUtils.omit(config, "props")
 })
 
 /**
@@ -75,9 +53,9 @@ export const mapFormItemDatePicker = (field, title, config = {}) => ({
             valueFormat: "YYYY-MM-DD HH:mm:ss",
             placeholder: `请选择${title}`,
             defaultTime: XEUtils.get(config, "props.type")?.includes("range") ? [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)] : new Date(2000, 1, 1, 23, 59, 59),
-            ...XEUtils.get(config, "props")
+            ...XEUtils.pick(config, "props")
         },
         ...XEUtils.omit(config, "props")
     },
-    ...config
+    ...XEUtils.pick(config, "props")
 })

src/components/scTable/renderer/form-radio.vue

@@ -1,33 +0,0 @@
-<template>
-    <el-radio-group v-model="modelValue" v-bind="renderOpts.props" @change="compChange">
-        <el-radio v-for="(item, index) in renderOpts.options" :key="index" :label="formatOptions('label', { item, index })" :value="formatOptions('value',  { item, index })"></el-radio>
-    </el-radio-group>
-</template>
-
-<script setup>
-import XEUtils from "xe-utils";
-import config from "@/config/select";
-
-const props = defineProps({
-    renderOpts: { type: Object, default: () => ({}) },
-    params: { type: Object, default: () => ({}) }
-})
-
-const modelValue = ref(null);
-watch(() => props.params, val => modelValue.value = XEUtils.get(val.data, val.field), { deep: true, immediate: true });
-
-const optionProps = reactive(props.renderOpts.optionProps || config.props);
-const formatOptions = (key, { item, index }) => {
-    if (XEUtils.isFunction(optionProps[key])) return optionProps[key]({ data: item, index });
-    return XEUtils.get(item, optionProps[key]);
-}
-
-const compChange = () => props.renderOpts.events.change({ [props.params.field]: modelValue.value });
-</script>
-
-<style scoped>
-@media (max-width: 1120px) {
-    .el-radio-group {flex-wrap: nowrap;} 
-    .el-radio {margin-right: 10px;}
-}
-</style>

src/components/scTable/renderer/form-select.vue

@@ -1,13 +1,6 @@
 <template>
     <el-select v-model="modelValue" :loading="loading" v-bind="renderOpts.props" @change="compChange">
-        <template #label="{ label }">
-            <span v-if="renderOpts.slot && XEUtils.isString(label)">{{ XEUtils.first(label.split(" ")) }}</span>
-            <span v-else>{{ label }}</span>
-        </template>
-        <el-option v-for="(item, index) in options" :key="index" :label="formatOptions('label', { item, index }) + ' ' + formatOptions('slot', { item, index })" :value="formatOptions('value', { item, index })">
-            <span style="float: left;">{{ formatOptions('label', { item, index }) }}</span>
-            <span v-if="renderOpts.slot" :style="XEUtils.get(renderOpts, 'slot.style', {})">{{ formatOptions('slot', { item, index }) }}</span>
-        </el-option>
+        <el-option v-for="(item, index) in options" :key="index" :label="XEUtils.get(item, optionProps.label, item)" :value="XEUtils.get(item, optionProps.value, index)"></el-option>
     </el-select>
 </template>
 
@@ -19,36 +12,25 @@ import config from "@/config/select";
 const props = defineProps({
     renderOpts: { type: Object, default: () => ({}) },
     params: { type: Object, default: () => ({}) }
-})
-
-watch(props.params.data, e => {
-    if (modelValue.value != XEUtils.get(e, props.params.field)) modelValue.value = XEUtils.get(e, props.params.field)
-}, { deep: true })
-watch(props.renderOpts.api.query, () => getRemoteData())
+});
 
 const loading = ref(false);
-const modelValue = ref(XEUtils.get(props, "renderOpts.defaultValue", null));
-const options = ref(TOOL.data.get(props.renderOpts.storageKey) || props.renderOpts.options);
-const optionProps = reactive(props.renderOpts.optionProps);
+const modelValue = ref(XEUtils.get(props.params.data, props.params.field, null));
+const options = ref(props.renderOpts.options || []);
+const optionProps = reactive(props.renderOpts.optionProps || config.props);
 
 const getRemoteData = async () => {
-	loading.value = true;
-    options.value = await config.queryData(props.renderOpts.api);
-    loading.value = false;
+    console.log('renderOpts',props.renderOpts)
+    console.log('params',props.params)
+
+    if (props.renderOpts.api) {
+        loading.value = true;
+        options.value = await config.queryData(props.renderOpts.api);
+        loading.value = false;
+    }
 }
 
-const formatOptions = (key, { item, index }) => {
-    if (XEUtils.isFunction(optionProps[key])) return optionProps[key]({ data: item, index });
-    return XEUtils.get(item, optionProps[key], "");
-};
-
 const compChange = () => props.renderOpts.events.change({ [props.params.field]: modelValue.value });
 
-!options.value.length && !props.renderOpts.storageKey && getRemoteData();
-
-const storageChange = ({ key, newValue }) => {
-    if (key === props.renderOpts.storageKey) options.value = XEUtils.toStringJSON(newValue).content;
-}
-window.addEventListener("setItemEvent", storageChange);
-onUnmounted(() => window.removeEventListener("setItemEvent", storageChange));
+getRemoteData();
 </script>

src/config/select.js

@@ -4,13 +4,14 @@ import config from "@/config/table";
 import XEUtils from "xe-utils";
 
 export default {
-    queryData: function ({ key, query }) {
-        if (XEUtils.isEmpty(XEUtils.get(API, key))) return [];
+    queryData: function ({ key = "", objKey = "all", query = {} }) {
         return new Promise(resolve => {
-            XEUtils.get(API, key).get(XEUtils.omit(query, val => XEUtils.isEmpty(val) && !XEUtils.isNumber(val))).then(res => {
+            if (!key || !XEUtils.has(XEUtils.get(API, key), objKey)) resolve([])
+
+            XEUtils.get(API, key)[objKey](query).then(res => {
                 const response = config.parseData(res)
                 resolve(response.data)
-            })
+            }).catch(() => resolve([]))
         })
     },
     

src/config/tableSelect.js

@@ -1,23 +0,0 @@
-//表格选择器配置
-
-export default {
-	pageSize: 20,						//表格每一页条数
-	parseData: function (res) {
-		return {
-			data: res.data,
-			rows: res.data.rows,		//分析行数据字段结构
-			total: res.data.total,		//分析总数字段结构
-			msg: res.message,			//分析描述字段结构
-			code: res.code				//分析状态字段结构
-		}
-	},
-	request: {
-		page: 'page',					//规定当前分页字段
-		pageSize: 'pageSize',			//规定一页条数字段
-		keyword: 'keyword'				//规定搜索字段
-	},
-	props: {
-		label: 'label',					//映射label显示字段
-		value: 'value',					//映射value值字段
-	}
-}

src/scui.js

@@ -47,15 +47,5 @@ export default {
 
 		//全局代码错误捕捉
 		app.config.errorHandler = errorHandler;
-
-        // 可以监听localStorage数据变化
-        const signSetItem = localStorage.setItem
-        localStorage.setItem = function (key, val) {
-            let setEvent = new Event("setItemEvent")
-            setEvent.key = key
-            setEvent.newValue = val
-            window.dispatchEvent(setEvent)
-            signSetItem.apply(this, arguments)
-        }
 	}
 }

src/utils/basicDic.js

@@ -150,8 +150,4 @@ export const salesDic = {
         shipped: "已发货",
         complete: "已完成"
     }
-}
-
-export function objectToArray(obj) {
-    return XEUtils.map(XEUtils.keys(obj), value => ({ label: XEUtils.get(obj, value), value }))
 }

src/views/basic/customer/index.vue

@@ -28,7 +28,7 @@ import XEUtils from "xe-utils";
 
 import API from "@/api";
 import TOOL from "@/utils/tool";
-import { statusDic, customerDic, objectToArray } from "@/utils/basicDic";
+import { statusDic, customerDic } from "@/utils/basicDic";
 import { mapFormItemInput, mapFormItemSelect } from "@/components/scTable/helper";
 import customerDetail from "./detail";
 
@@ -40,7 +40,7 @@ const props = defineProps({
 });
 
 const selectConfig = reactive({
-    options: objectToArray(statusDic),
+    options: statusDic,
     events: {
         change: data => XEUtils.merge(formConfig.data, data)
     }
@@ -51,12 +51,12 @@ const formConfig = reactive({
     items: computed(() => props.selectable ? [
         mapFormItemInput("nameLike", "客户名称"),
         mapFormItemInput("codeLike", "客户编号"),
-        mapFormItemSelect("type", "客户分类", { ...selectConfig, options: objectToArray(customerDic.type) })
+        mapFormItemSelect("type", "客户分类", { ...selectConfig, options: customerDic.type })
     ] : [
         mapFormItemInput("nameLike", "客户名称"),
         mapFormItemInput("codeLike", "客户编号"),
         mapFormItemSelect("status", "客户状态", selectConfig),
-        mapFormItemSelect("type", "客户分类", { ...selectConfig, options: objectToArray(customerDic.type) })
+        mapFormItemSelect("type", "客户分类", { ...selectConfig, options: customerDic.type })
     ])
 });
 

src/views/basic/material/index.vue

@@ -29,7 +29,7 @@ import XEUtils from "xe-utils";
 
 import API from "@/api";
 import TOOL from "@/utils/tool";
-import { statusDic, materialDic, objectToArray } from "@/utils/basicDic";
+import { statusDic, materialDic } from "@/utils/basicDic";
 import { mapFormItemInput, mapFormItemSelect } from "@/components/scTable/helper";
 import materialDetail from "./detail";
 
@@ -41,7 +41,7 @@ const props = defineProps({
 });
 
 const selectConfig = reactive({
-    options: objectToArray(materialDic.type),
+    options: materialDic.type,
     events: {
         change: data => XEUtils.merge(formConfig.data, data)
     }
@@ -56,8 +56,8 @@ const formConfig = reactive({
         mapFormItemInput("nameLike", "物料名称"),
         mapFormItemInput("codeLike", "物料编码"),
         mapFormItemSelect("materialType", "物料类型", selectConfig),
-        mapFormItemSelect("status", "物料状态", { ...selectConfig, options: objectToArray(statusDic) }),
-        mapFormItemSelect("needType", "需求类型", { ...selectConfig, options: objectToArray(materialDic.needType) })
+        mapFormItemSelect("status", "物料状态", { ...selectConfig, options: statusDic }),
+        mapFormItemSelect("needType", "需求类型", { ...selectConfig, options: materialDic.needType })
     ])
 });
 

src/views/basic/qualityPlan/index.vue

@@ -33,13 +33,13 @@ import XEUtils from "xe-utils";
 
 import API from "@/api";
 import TOOL from "@/utils/tool";
-import { reviewStatusDic, qualityPlanTypeDic, objectToArray } from "@/utils/basicDic";
+import { reviewStatusDic, qualityPlanTypeDic } from "@/utils/basicDic";
 import { mapFormItemInput, mapFormItemSelect, mapFormItemDatePicker } from "@/components/scTable/helper";
 import planDetail from "./detail";
 import planDesc from "./desc";
 
 const selectConfig = reactive({
-    options: objectToArray(reviewStatusDic),
+    options: reviewStatusDic,
     events: {
         change: data => XEUtils.merge(formConfig.data, data)
     }
@@ -61,7 +61,7 @@ const formConfig = reactive({
         mapFormItemInput("nameLike", "方案名称"),
         mapFormItemInput("codeLike", "方案编号"),
         mapFormItemSelect("reviewStatus", "审批状态", selectConfig),
-        mapFormItemSelect("type", "方案类型", { ...selectConfig, options: objectToArray(qualityPlanTypeDic) }),
+        mapFormItemSelect("type", "方案类型", { ...selectConfig, options: qualityPlanTypeDic }),
         mapFormItemDatePicker("createTime", "创建日期", daterangeConfig)
     ]
 });

src/views/production/bom/index.vue

@@ -41,7 +41,7 @@ import XEUtils from "xe-utils";
 
 import API from "@/api";
 import TOOL from "@/utils/tool";
-import { statusDic, objectToArray } from "@/utils/basicDic";
+import { statusDic } from "@/utils/basicDic";
 import { mapFormItemInput, mapFormItemSelect, mapFormItemDatePicker } from "@/components/scTable/helper";
 import bomDetail from "./detail";
 import bomDesc from "./desc";
@@ -53,7 +53,7 @@ const treeConfig = reactive({
 })
 
 const selectConfig = reactive({
-    options: objectToArray(statusDic),
+    options: statusDic,
     events: {
         change: data => XEUtils.merge(formConfig.data, data)
     }

src/views/sales/order/index.vue

@@ -28,13 +28,21 @@ import XEUtils from "xe-utils";
 
 import API from "@/api";
 import TOOL from "@/utils/tool";
-import { salesDic, objectToArray } from "@/utils/basicDic";
+import { salesDic } from "@/utils/basicDic";
 import { mapFormItemInput, mapFormItemSelect, mapFormItemDatePicker } from "@/components/scTable/helper";
 import orderDetail from "./detail";
 import orderDesc from "./desc";
 
 const selectConfig = reactive({
-    options: objectToArray(salesDic.orderStatus),
+    options: salesDic.orderStatus,
+    events: {
+        change: data => XEUtils.merge(formConfig.data, data)
+    }
+});
+
+const customerConfig = reactive({
+    api: { key: "basic.customer", query: { orderBy: "id_desc" } },
+    optionProps: { label: "name", value: "id" },
     events: {
         change: data => XEUtils.merge(formConfig.data, data)
     }
@@ -55,6 +63,8 @@ const formConfig = reactive({
     items: [
         mapFormItemInput("codeLike", "单据编号"),
         mapFormItemSelect("status", "单据状态", selectConfig),
+        mapFormItemSelect("customerId", "客户", customerConfig),
+        mapFormItemInput("contractNoLike", "合同编号"),
         mapFormItemDatePicker("orderDate", "单据日期", daterangeConfig)
     ]
 });
@@ -62,7 +72,9 @@ const formConfig = reactive({
 const paramsColums = reactive([
     { column: "orderBy", defaultValue: "code_asc" },
     { column: "codeLike" },
+    { column: "contractNoLike" },
     { column: "status" },
+    { column: "customerId" },
     { column: "orderDateBegin", field: "orderDate[0]" },
     { column: "orderDateEnd", field: "orderDate[1]" }
 ]);

src/views/sales/plan/index.vue

@@ -26,7 +26,7 @@ import XEUtils from "xe-utils";
 
 import API from "@/api";
 import TOOL from "@/utils/tool";
-import { salesDic, objectToArray } from "@/utils/basicDic";
+import { salesDic } from "@/utils/basicDic";
 import { mapFormItemInput, mapFormItemSelect, mapFormItemDatePicker } from "@/components/scTable/helper";
 import planDetail from "./detail";
 
@@ -38,7 +38,7 @@ const formatStatus = row => {
 
 
 const selectConfig = reactive({
-    options: objectToArray(salesDic.planType),
+    options: salesDic.planType,
     events: {
         change: data => XEUtils.merge(formConfig.data, data)
     }

src/views/workmanship/line/index.vue

@@ -46,7 +46,7 @@ import XEUtils from "xe-utils";
 
 import API from "@/api";
 import TOOL from "@/utils/tool";
-import { statusDic, workmanshipDic, objectToArray } from "@/utils/basicDic";
+import { statusDic, workmanshipDic } from "@/utils/basicDic";
 import { mapFormItemInput, mapFormItemSelect, mapFormItemDatePicker } from "@/components/scTable/helper";
 import processDetail from "./detail";
 import processDesc from "./desc";
@@ -61,7 +61,7 @@ const props = defineProps({
 
 const selectConfig = reactive({
     visible: !props.hideHandler,
-    options: objectToArray(statusDic),
+    options: statusDic,
     events: {
         change: data => XEUtils.merge(formConfig.data, data)
     }

src/views/workmanship/process/index.vue

@@ -29,7 +29,7 @@ import XEUtils from "xe-utils";
 
 import API from "@/api";
 import TOOL from "@/utils/tool";
-import { statusDic, workmanshipDic, objectToArray } from "@/utils/basicDic";
+import { statusDic, workmanshipDic } from "@/utils/basicDic";
 import { mapFormItemInput, mapFormItemSelect, mapFormItemDatePicker } from "@/components/scTable/helper";
 import processDetail from "./detail";
 
@@ -41,7 +41,7 @@ const props = defineProps({
 });
 
 const selectConfig = reactive({
-    options: objectToArray(statusDic),
+    options: statusDic,
     events: {
         change: data => XEUtils.merge(formConfig.data, data)
     }
@@ -66,7 +66,7 @@ const formConfig = reactive({
         mapFormItemInput("nameLike", "工序名称"),
         mapFormItemInput("codeLike", "工序编号"),
         mapFormItemSelect("status", "工序状态", selectConfig),
-        mapFormItemSelect("category", "工序分类", { ...selectConfig, options: objectToArray(workmanshipDic.category) }),
+        mapFormItemSelect("category", "工序分类", { ...selectConfig, options: workmanshipDic.category }),
         mapFormItemDatePicker("createTime", "创建日期", daterangeConfig)
     ])
 });

src/vxeTable.js

@@ -4,7 +4,6 @@ import VxeUITable from "vxe-table";
 import VxeUIPluginRenderElement from "@vxe-ui/plugin-render-element";
 import VxeUIPluginExportXLSX from "@vxe-ui/plugin-export-xlsx";
 import ExcelJS from "exceljs";
-import config from "@/config/select";
 
 import "vxe-pc-ui/lib/style.css";
 import "vxe-table/lib/style.css";
@@ -15,7 +14,6 @@ localStorage.getItem("APP_DARK") && VxeUITable.VxeUI.setTheme("dark");
 // 自定义renderer
 import tableSearch from "@/components/scTable/renderer/table-search";
 import formSelect from "@/components/scTable/renderer/form-select";
-import formRadio from "@/components/scTable/renderer/form-radio";
 import cellTag from "@/components/scTable/renderer/cell-tag";
 
 VxeUI.renderer.mixin({
@@ -27,24 +25,7 @@ VxeUI.renderer.mixin({
 
     "$form-select": {
         renderFormItemContent(renderOpts, params) {
-            const field = XEUtils.get(params, "field")
-            const defaultValue = XEUtils.get(params.data, field);
-
-            const storageKey = XEUtils.get(renderOpts, "storageKey")
-            const api = XEUtils.get(renderOpts, "api", {})
-            const slot = XEUtils.get(renderOpts, "slot", {})
-            const props = XEUtils.get(renderOpts, "props", {})
-            const options = XEUtils.get(renderOpts, "options", [])
-            const optionProps = XEUtils.get(renderOpts, "optionProps", config.props)
-            const events = XEUtils.get(renderOpts, "events", {})
-
-            return h(formSelect, { renderOpts: { defaultValue, storageKey, api, props, options, optionProps, slot, events }, params });
-        }
-    },
-
-    "$form-radio": {
-        renderFormItemContent(renderOpts, params) {
-            return h(formRadio, { renderOpts, params });
+            return h(formSelect, { renderOpts, params });
         }
     },