优化表格当前行

src/components/HelloWorld copy.vue

+<template>
+  <div style="width:500px">
+    <hsFile
+      v-model="value"
+      :allSourceData='allSourceData'
+      :uploadFileFun='uploadFileFun_'
+    >
+
+    </hsFile>
+    <div>{{value}}</div>
+  </div>
+
+</template>
+<script>
+import apiUc from "./apiUc";
+export default {
+  mixins: [apiUc],
+  data() {
+    return {
+      value: "",
+      formData: {
+        test_p: ""
+      },
+      allSourceData: {
+        config: {
+          appCode: "PBOrg",
+          multiple: true,
+          label: "附件",
+          accept: ".xls,.doc,.txt,.pdf,.jpg",
+          uploaded: v => {
+            console.log(v, "sadas");
+            console.log(this.value);
+          }
+        },
+        sourceData: []
+      }
+    };
+  },
+  mounted() {},
+  methods: {
+    uploadFileFun_(formData) {
+      return this.uploadFileFun("PBOrg", formData);
+    },
+    printResult() {
+      console.log(this.formData);
+    }
+  }
+};
+</script>
+<style scoped>
+.codeTxt {
+  text-align: left;
+}
+</style>
\ No newline at end of file

src/components/HelloWorld.vue

 <template>
-  <div style="width:500px">
-    <hsSelectPlus
-      v-model="formData.test_p"
+  <div>
+    <hsTable
+      maxHeight='500px'
       :allSourceData='allSourceData'
-      :requestMethod='requestMethod'
-      :writeBackObject='formData'
-    ></hsSelectPlus>
+    ></hsTable>
   </div>
-
 </template>
 <script>
 import apiUc from "./apiUc";
@@ -15,54 +12,118 @@ export default {
   mixins: [apiUc],
   data() {
     return {
-      formData: {
-        test_p: ""
-      },
       allSourceData: {
         config: {
-          url: "",
-          isInnerRequest: true, // 静态查询时 是否在内部请求数据
-          proxyTag: "commonUtilAPI", //代理前缀
-          ref: {
-            const_id: "0", // 常量id
-            table_name: "mmMaterialCategory", // 表名
-            columns: "id,material_category", // 查询列
-            remote_condition: "material_category", // 远程搜索字段
-            displayfield: "", // 显示默认值
-            writebackfield: [] // 回写对象
+          highlightCurrentRow:false,
+          hover:{hoverBackground:'',leaveBackground:''},
+          showIndex: false, // 是否显示 序号
+          hsConfig: {
+            default_type: 1 // mes风格
           },
-          multiple: false,
-          is_computed: false,
-          disabled: false,
-          size: "mini",
-          clearable: true,
-          title: "",
-          placeholder: "",
-          value: "id",
-          label: "material_category",
-          linkBtnUi: {
-            url:
-              "http://47.110.145.204:59168/queryBi/web//#/DyncUI/Single/PBArchive/pb_unit",
-            writeProp: {
-              test_p: "unit_name" // 后面这个值是弹出页面返回过来的字段,回写给writeBackObject中的某个属性
+          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("测试");
+              }
             },
-            parms: {}
-          }
+            {
+              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" // 文本
+            }
+          ]
         },
-        sourceData: [] // [{value:'',lable:''}] 的形式
+        sourceData: []//表格数据
       }
     };
   },
-  mounted() {},
+  mounted() {
+    this.init();
+  },
   methods: {
-    printResult() {
-      console.log(this.formData);
+    init() {
+      this.allSourceData.sourceData = [
+        { customer_name: 1, style_code: 2, order_size: "0",_styleRowSetting_:{"color":"blue","background":"red"} },
+          { customer_name: 1, style_code: 2, order_size: "0",_styleRowSetting_:{"color":"blue","background":"blue"} }
+      ];
     }
   }
 };
-</script>
-<style scoped>
+</script>
\ No newline at end of file
-.codeTxt {
-  text-align: left;
-}
-</style>
\ No newline at end of file

src/components/apiUc.js

@@ -104,6 +104,9 @@ export default {
           return url
         }
       }
+    },
+    uploadFileFun(appCode,formData) {
+      return axios.post(`fileresourceAPI/file/${appCode}/`, formData)
     }
   },
 }

src/packages/hs-file/index.vue

@@ -10,7 +10,10 @@
     <!-- <el-link el-icon-view @click="dialogVisible=true"> 附件📎</el-link> -->
     <el-link @click="dialogVisible=true">
       <div class="showTxt">
-        <p class="showFiletxt" v-show="fileName">{{fileName}}</p>
+        <p
+          class="showFiletxt"
+          v-show="fileName"
+        >{{fileName}}</p>
         <div>{{configData.label}}
           <i class="el-icon-s-operation el-icon--right"></i>
         </div>
@@ -157,30 +160,33 @@
 </template>
 
 <script>
-import ucComponent from '../ucClass/uc_component'
-import jsoneditor from '../common/jsoneditor'
-import commonUtility from '../funTools/commonUtility'
-import _ from 'lodash'
+import ucComponent from "../ucClass/uc_component";
+import jsoneditor from "../common/jsoneditor";
+import commonUtility from "../funTools/commonUtility";
+import _ from "lodash";
 export default {
   mixins: [ucComponent],
   components: {
     jsoneditor
   },
-  name: 'hsFile',
+  name: "hsFile",
   props: {
+    uploadFileFun: {
+      type: Function
+    },
     allSourceData: {
       type: Object,
       default() {
-        return {}
+        return {};
       }
     },
     elInfo: {
       type: Object,
       default() {
-        return {}
+        return {};
       }
     },
-    value: '',
+    value: "",
     layout: {},
     jsoneditorCloseAfter: {
       type: Function
@@ -192,42 +198,35 @@ export default {
   watch: {
     allSourceData: {
       handler: function(newVal, oldVal) {
-        const { config } = newVal
-        this.initConfig(config)
+        const { config } = newVal;
+        this.initConfig(config);
       },
       deep: true
     },
     value(val) {
-      this.value_inner = val
-      this.initData()
+      this.value_inner = val;
+      this.initData();
     },
     value_inner(val) {
-      this.$emit('input', val)
+      this.$emit("input", val);
     },
     fileList: {
       handler: function(newVal, oldVal) {
-        this.changeBtnStatus(newVal)
+        this.changeBtnStatus(newVal);
       },
       deep: true
     },
     newFileList: {
       handler: function(newVal, oldVal) {
-        const data = _.cloneDeep(newVal)
-        data.forEach(item => {
-          delete item.fileListImage
-          delete item.file
-          delete item.name
-        })
-        this.value_inner = JSON.stringify(data)
-        // this.changeBtnStatus(data)
+        this.initValue(newVal);
       },
       deep: true
     }
   },
   data() {
     return {
-      elId: '',
-      value_inner: '',
+      elId: "",
+      value_inner: "",
       jsoneditorVisible: false,
       sourceData: [],
       visible_popover: false,
@@ -241,93 +240,93 @@ export default {
       multiple: true,
       configData: {
         multiple: true,
-        accept: '*',
-        appCode: '',
-        label: '查看附件'
+        accept: "*",
+        appCode: "",
+        label: "查看附件"
       },
-      appCode: '',
+      appCode: "",
       hideInput: false,
-      fileName: ''
-    }
+      fileName: ""
+    };
   },
   mounted() {
     this.$nextTick(() => {
-      const { config } = this.allSourceData
-      this.initConfig(config)
-    })
-    // const exitImage = localStorage['exitImage']
-    // if(this.value){
-    //   const data=JSON.parse(this.value)
-    // }
-    // console.log(this.value, 'append-to-body')
-    // this.initData()
+      const { config } = this.allSourceData;
+      this.initConfig(config);
+    });
   },
 
   methods: {
+    initValue(newVal) {
+      const data = _.cloneDeep(newVal);
+      data.forEach(item => {
+        delete item.fileListImage;
+        delete item.file;
+        delete item.name;
+      });
+      this.value_inner = JSON.stringify(data);
+    },
     changeBtnStatus(data) {
       if (data.length >= 1) {
-        this.hideInput = true
+        this.hideInput = true;
       } else {
-        this.hideInput = false
+        this.hideInput = false;
       }
     },
     openDialog() {
-      this.initData()
+      this.initData();
     },
     initData() {
-      if (this.value) {
-        this.newFileList = JSON.parse(this.value)
-        const { config } = this.allSourceData
-        this.initConfig(config)
-        const appCode_ = this.configData.appCode
-        const { appCode } = commonUtility.parseUrlQueryBIDyncAppcodePageName()
-        const appCode__ = appCode_ || appCode
-        this.appCode = appCode__
-        this.newFileList.forEach(item => {
-          const { NewFileName } = item
-          this.$set(
-            item,
-            'file',
-            `fileresourceAPI/file/${appCode__}/${NewFileName}/`
-          )
-          this.$set(item, 'fileListImage', [
-            `fileresourceAPI/file/${appCode__}/${NewFileName}/`
-          ])
-        })
-        // this.changeBtnStatus(this.newFileList)
-      }
+      this.newFileList = this.value ? JSON.parse(this.value) : [];
+      const { config } = this.allSourceData;
+      this.initConfig(config);
+      this.newFileList.forEach(item => {
+        const { NewFileName } = item;
+        this.$set(
+          item,
+          "file",
+          `fileresourceAPI/file/${this.appCode}/${NewFileName}/`
+        );
+        this.$set(item, "fileListImage", [
+          `fileresourceAPI/file/${this.appCode}/${NewFileName}/`
+        ]);
+      });
     },
     initConfig(config = {}) {
-      this.configData = Object.assign(this.configData, config)
-      const { multiple } = this.configData
+      this.configData = Object.assign(this.configData, config);
+      const appCode_ = this.configData.appCode;
+      const { appCode } = commonUtility.parseUrlQueryBIDyncAppcodePageName();
+      const appCode__ = appCode_ || appCode;
+      this.appCode = appCode__;
+      const { multiple } = this.configData;
       if (!multiple && this.newFileList.length) {
-        this.fileName = this.newFileList[0].OldFileName
+        this.fileName = this.newFileList[0].OldFileName;
       }
     },
     handleClose(done) {
-      this.$confirm('确认关闭？')
+      this.$confirm("确认关闭？")
         .then(_ => {
-          done()
+          done();
         })
-        .catch(_ => {})
+        .catch(_ => {});
     },
     imgPreview(file) {
-      const self = this
+      const self = this;
       // 看支持不支持FileReader
-      if (!file || !window.FileReader) return
+      if (!file || !window.FileReader) return;
       // 创建一个reader
-      const reader = new FileReader()
+      const reader = new FileReader();
       // 将图片将转成 base64 格式
-      reader.readAsDataURL(file)
+      reader.readAsDataURL(file);
       // 读取成功后的回调
       reader.onloadend = function() {
-        const type = file.type
+        const type = file.type;
         if (/^image/.test(type)) {
-          self.fileListImage.push(this.result)
+          self.fileListImage.push(this.result);
         } else {
           self.fileListNoImage.push({
             name: file.name
-          })
+          });
         }
         self.fileList.push({
           type: file.type,
@@ -336,69 +335,71 @@ export default {
           file: this.result,
           fileBrod: file,
           previewList: [this.result]
-        })
-      }
+        });
+      };
     },
     handleFileChange(e) {
-      const inputDOM = document.getElementById('avatar')
-      this.file = inputDOM.files[0]
-      this.files = Array.from(inputDOM.files)
+      const inputDOM = document.getElementById("avatar");
+      this.file = inputDOM.files[0];
+      this.files = Array.from(inputDOM.files);
       // 在获取到文件对象进行预览就行了！
       this.files.forEach(item => {
-        this.imgPreview(item)
-      })
+        this.imgPreview(item);
+      });
       // 清除当前input 值
-      e.target.value = ''
+      e.target.value = "";
     },
     deleteCurrImage(image, index) {
-      this.fileList.splice(index, 1)
+      this.fileList.splice(index, 1);
     },
     preview(item, index) {
-      const { name } = item
-      this.$set(item, 'file', `fileresourceAPI/file/${this.appCode}/${name}/`)
-      this.$set(item, 'fileListImage', [
+      const { name } = item;
+      this.$set(item, "file", `fileresourceAPI/file/${this.appCode}/${name}/`);
+      this.$set(item, "fileListImage", [
         `fileresourceAPI/file/${this.appCode}/${name}/`
-      ])
+      ]);
     },
     deleteFile(item, index) {
-      this.fileList.splice(index, 1)
+      this.fileList.splice(index, 1);
     },
     deleteExitFile(item, index) {
-      this.newFileList.splice(index, 1)
+      this.newFileList.splice(index, 1);
     },
     async upload() {
-      const formData = new FormData()
+      const formData = new FormData();
       if (!this.fileList.length) {
-        this.$message.error('请选择文件!')
-        return
+        this.$message.error("请选择文件!");
+        return;
       }
-      const { multiple } = this.configData
+      const { multiple } = this.configData;
       if (!multiple) {
         if (this.newFileList.length >= 1) {
-          this.$message.error('仅支持单文件上传,请手动删除服务器文件后再试!')
-          return
+          this.$message.error("仅支持单文件上传,请手动删除服务器文件后再试!");
+          return;
         }
       }
       this.fileList.forEach(element => {
-        const { NewFileName, fileBrod } = element
-        formData.append(NewFileName, fileBrod)
-      })
-      const newFileList = []
-      const res = await this.$API.uploadFile(formData)
+        const { NewFileName, fileBrod } = element;
+        formData.append(NewFileName, fileBrod);
+      });
+      const newFileList = [];
+      const res = await this.uploadFileFun(formData);
       const resData = (res.data || []).filter(item => {
-        return item.Sucess
-      })
+        return item.Sucess;
+      });
       const resDataError = (res.data || []).filter(item => {
-        return !item.Sucess
-      })
-      let errorStr = ''
+        return !item.Sucess;
+      });
+      let errorStr = "";
       resDataError.forEach(jtem => {
-        const { Error, OldFileName } = jtem
-        errorStr += `${OldFileName}:${Error}`
-      })
+        const { Error, OldFileName } = jtem;
+        errorStr += `${OldFileName}:${Error}`;
+      });
       if (errorStr) {
-        this.$message.error(errorStr)
+        this.$message.error(errorStr);
       }
+      console.log(this.appCode);
+
       resData.forEach(item => {
         newFileList.push({
           OldFileName: item.OldFileName,
@@ -407,20 +408,24 @@ export default {
           fileListImage: [
             `fileresourceAPI/file/${this.appCode}/${item.NewFileName}/`
           ]
-        })
+        });
         const targetIndex = this.fileList.findIndex(
           item_ => item_.NewFileName === item.OldFileName
-        )
-        this.fileList.splice(targetIndex, 1)
-      })
-      this.newFileList.push(...newFileList)
+        );
+        this.fileList.splice(targetIndex, 1);
+      });
+      this.newFileList.push(...newFileList);
       if (!multiple && this.newFileList.length) {
-        this.fileName = this.newFileList[0].OldFileName
+        this.fileName = this.newFileList[0].OldFileName;
+      }
+      const { uploaded } = this.configData;
+      if (typeof uploaded === "function") {
+        uploaded(this.newFileList);
       }
-      localStorage['exitImage'] = JSON.stringify(this.newFileList)
+      localStorage["exitImage"] = JSON.stringify(this.newFileList);
     }
   }
-}
+};
 </script>
 <style scoped>
 .file {
@@ -540,7 +545,7 @@ export default {
   color: red;
   margin-right: 5px;
 }
-.showFiletxt{
-height: 18px;
+.showFiletxt {
+  height: 18px;
 }
 </style>

src/packages/hs-select-plus/index.vue

@@ -278,7 +278,6 @@ export default {
       this.dialogIframeVisible = false;
     },
     linkBtnUiBack(data) {
-      debugger;
       const linkBtnUi = this.configData.linkBtnUi;
       if (!linkBtnUi) return;
       const writeProp = linkBtnUi.writeProp || {};
@@ -510,7 +509,6 @@ export default {
     },
     select_focus(event) {
       const { remote_condition } = this.configData.ref;
-      debugger;
       if (remote_condition && !this.is_mock) {
         this.remoteMethod_();
       }

src/packages/hs-table/index.vue

@@ -45,7 +45,7 @@
       :data="this.tableData"
       :style="tableStyle"
       :fit='true'
-      :highlight-current-row=true
+      :highlight-current-row='configData.highlightCurrentRow'
       :show-summary='showSummary'
       :header-row-style="setHeaderRowStyle"
       :header-cell-style="setHeaderCellStyle"
@@ -483,7 +483,8 @@ export default {
       tableDataFirst: null, // table[0]第一行数据
       hsDyncProp: false, // 是否含有动态列
       targetRowInner: {}, // 当前行
-      dtlDialogFormDisAbled: false
+      dtlDialogFormDisAbled: false,
+      highlightCurrentRow:true
     };
   },
   watch: {
@@ -1560,6 +1561,7 @@ export default {
     },
     // 鼠标移入事件
     tableCellmouse(row, column, cell, event) {
+      return
       if (this.configData.hover) {
         const { hoverBackground } = this.configData.hover;
         if (hoverBackground) {

src/packages/hs-table/mes_style.js

@@ -3,6 +3,7 @@ export default {
     background: 'red'
   },
   'showHandle': false,
+  highlightCurrentRow:true,
   handleWidth: 80,
   selection: false,
   showIndex: true,

vue.config.js

@@ -68,6 +68,13 @@ module.exports = {
             '^/api': ''
         }
       },
+      '/fileresourceAPI': {
+        target: fileresourceAPI,
+        changeOrigin: true,
+        pathRewrite: {          
+            '^/fileresourceAPI': ''
+        }
+      },
       '/commonUtilAPI': {
         target: commonUtilAPI,
         changeOrigin: true,