测试

src/App.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import HelloWorld from "./components/HelloWorld.vue";
+import HelloWorld from "./components/hsTable.vue";
 
 export default {
   name: "App",

src/components/apiUc.js

@@ -28,15 +28,13 @@ export default {
   },
   methods: {
     async requestMethod (config, value) {
-      const { ref, proxyTag, dyncQueryParms } = config || {}
-      const { const_id, table_name, columns, remote_condition } = ref || {}
-      const url_dynamic = `${proxyTag}/ref/table`
-      const url_static = `${proxyTag}/ref/items`
-      let real_url = ''
-      const url = ''
+      const { ref, dyncQueryParms } = config || {}
+      const { remote_condition } = ref || {}
+      let real_url = this.initRealUrl(config)
+      if (!real_url) return []
       let remote_condition_ = remote_condition.trim()
       let parms = ''
-      const dyncQueryParms_=_.cloneDeep(dyncQueryParms||{})
+      const dyncQueryParms_ = _.cloneDeep(dyncQueryParms || {})
       if (value) {
         dyncQueryParms_[remote_condition_] = value.trim()
       }
@@ -47,23 +45,13 @@ export default {
           parms += `&${key}=${encodeURIComponent(dyncQueryParms_[key])}`
         }
       }
-      if (const_id !== '0' && Number(const_id)) {
-        // 常量id
-        real_url = `${url_static}/${const_id}/`
-      } else if (table_name) {// 表名字段名
-        // 字段查询
-        real_url = `${url_dynamic}/${table_name}/${columns}/`
-      } else if (url) {
-        real_url = url
-      }
       if (real_url.includes('?')) {
         real_url += parms
       } else {
         real_url += '?' + parms
       }
-      if (!real_url) return []
       const type = typeof value
-      if (type === 'undefined' && remote_condition) {// 远程搜索的时候
+      if (type === 'undefined' && remote_condition_) {// 远程搜索的时候
         return []
       } else {
         const res = await axios.get(real_url)
@@ -96,5 +84,26 @@ export default {
 
       return list
     },
+    initRealUrl (config) {
+      const { url, ref, proxyTag } = config
+      const { const_id, table_name, columns, remote_condition } = ref
+      const url_dynamic = `${proxyTag}/ref/table`
+      const url_static = `${proxyTag}/ref/items`
+      if (remote_condition) {
+        if (table_name) {
+          return `${url_dynamic}/${table_name}/${columns}/`
+        } else {
+          return `${url}`
+        }
+      } else {
+        if (const_id && Number(const_id) !== 0) {
+          return `${url_static}/${const_id}/`
+        } else if (table_name) {
+          return `${url_dynamic}/${table_name}/${columns}/`
+        } else {
+          return url
+        }
+      }
+    }
   },
 }

src/components/hsTable.vue

+<template>
+  <div>
+    <hsTable
+      maxHeight='500px'
+      :allSourceData='allSourceData'
+    ></hsTable>
+  </div>
+</template>
+<script>
+import apiUc from "./apiUc";
+export default {
+  mixins: [apiUc],
+  data() {
+    return {
+      allSourceData: {
+        config: {},
+        sourceData: []
+      }
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.allSourceData.config = {
+        showIndex: false, // 是否显示 序号
+        hsConfig: {
+          default_type: 1 // mes风格
+        },
+        showHandle: true, // 是否显示操作栏
+        selection: true, // 是否显示复选框
+        handleWidth: 180, // 操作栏宽度
+        isAdaptive: true, // 宽度自适应
+        toolItems: [
+          // 工具栏
+          {
+            label: "测试2",
+            icon: "",
+            type: "text",
+            isHide: false, // 是否隐藏
+            disabled: false, // 是否禁用
+            click: () => {
+              alert("测试2");
+            }
+          }
+        ],
+        handleColumns: [
+          // 操作栏
+          {
+            label: "测试1",
+            icon: "",
+            isHide: false, // 是否隐藏
+            type: "text",
+            disabled: false, // 是否禁用
+            click: () => {
+              alert("测试");
+            }
+          },
+          {
+            label: "测试2",
+            icon: "",
+            isHide: false, // 是否隐藏
+            type: "text",
+            disabled: false, // 是否禁用
+            click: () => {
+              this.allSourceData.sourceData.push({});
+            }
+          }
+        ],
+        columnsConfig: [
+          // 列信息
+          {
+            prop: "order_size", //对应后端的字段
+            label: "型号", // 列名
+            showOverflowTooltip: true, // 超出时 显示省略
+            showType: "hsSelectPlus", // 列类型
+            allSourceData: {
+              // 参照配置
+              config: {
+                url: "",
+                isInnerRequest: true, // 是否在内部请求
+                proxyTag: "commonUtilAPI", // 代理前缀
+                ref: {
+                  const_id: "0", // 常量值
+                  table_name: "im_store_group", // 表名
+                  columns: "id,name", //列名
+                  remote_condition: "", // 是否远程搜索
+                  displayfield: "", // 显示默认值
+                  writebackfield: [] //回写字段
+                },
+                dyncQueryParms: {}, // 查询参数
+                multiple: false, // 是否多选
+                disabled: false,
+                size: "mini",
+                clearable: true,
+                title: "",
+                placeholder: "请选择",
+                value: "id", // 对应的后端字段
+                label: "name", // 对应的后端字段
+                is_computed: false // 是否是计算属性
+              },
+              sourceData: []
+            },
+            requestMethod: this.requestMethod // 参照请求方法
+          },
+          {
+            prop: "style_code",
+            label: "款号",
+            showOverflowTooltip: true,
+            showType: "input" // 普通输入框
+          },
+          {
+            prop: "customer_name",
+            label: "客户",
+            showOverflowTooltip: true,
+            showType: "text" // 文本
+          }
+        ]
+      };
+      this.allSourceData.sourceData = [
+        { customer_name: 1, style_code: 2, order_size: "0" }
+      ];
+    }
+  }
+};
+</script>
\ No newline at end of file