cnhis-design-vue 0.1.40 → 0.1.42

package/packages/select/src/TableSelect/index.vue

@@ -8,7 +8,7 @@
       }
     "
   > -->
-  <div class="table-select" @mousedown="mousedown($event)">
+  <div class="table-select" @mousedown="mousedown($event)" :id="id">
     <a-select
       ref="selectBox"
       v-on="$listeners"
@@ -24,7 +24,6 @@
       @focus="isSearch = true"
       @search="search"
       @change="valueChange"
-      @dropdownVisibleChange="dropdownVisibleChange"
       :getPopupContainer="
         triggerNode => {
           return triggerNode.parentNode || document.body;
@@ -54,6 +53,7 @@
             :data="tableData"
             :radio-config="{ trigger: 'row', checkRowKey: defaultSelecteRow }"
             :edit-config="{ trigger: 'click', mode: 'cell' }"
+            :edit-rules="validRules"
             @radio-change="radioChangeEvent"
             @cell-click="cellClick"
           >
@@ -61,6 +61,25 @@
               <span class="opt-btn" @click="deleteRow(row)">删除</span>
             </template>
 
+            <!-- <template v-for="item in colSelectList" #[item.slots.edit]="scope">
+              <a-select
+                :key="item.slots.edit"
+                show-search
+                :placeholder="`请选择${item.title}`"
+                style="width: 100%"
+                :default-active-first-option="false"
+                :filter-option="false"
+                :not-found-content="null"
+                :defaultValue="scope.row[item.field]"
+                v-model="scope.row[item.field]"
+                @change="$refs.xTable.updateStatus(scope)"
+              >
+                <a-select-option :key="option.value" :value="option.value" v-for="option in item.editRender.options">
+                  {{option.label}}
+                </a-select-option>
+              </a-select>
+            </template> -->
+
             <template #empty>
               <span>
                 <p class="no-data">暂无数据</p>
@@ -74,7 +93,7 @@
               <a-button type="primary" style="margin-right: auto" @click="addRow">新增</a-button>
               <span v-show="!isOk" class="tips">请完善表格信息</span>
               <span v-show="isOk && isRepeat" class="tips">表格信息不能重复</span>
-              <a-button style="margin-right: 10px" @click="isOpen = false">取消</a-button>
+              <a-button style="margin-right: 10px" @click="cancel">取消</a-button>
               <a-button type="primary" @click="saveRow">确定</a-button>
             </template>
           </div>
@@ -121,9 +140,13 @@ export default create({
       type: String,
       default: 'noEdit'
     },
+    id: {
+      type: String,
+      default: `tableSelect${Date.now()}`
+    },
     columns: {
       type: Array,
-      default: () => []
+      require: true
     },
     data: {
       type: Array,
@@ -140,13 +163,20 @@ export default create({
     fetching: {
       type: Boolean,
       default: false
+    },
+    validRules: {
+      type: Object,
+      default: () => {}
     }
   },
   computed: {
     mode() {
       const obj = this.columns.find(v => v.type);
       return obj?.type === 'checkbox' || this.type === 'edit' ? 'multiple' : 'default';
-    }
+    },
+    // colSelectList() {
+    //   return this.columns.filter(v => v.slots?.edit);
+    // },
   },
   beforeCreate() {
     Vue.use(Select).use(Icon).use(Spin).use(Pagination).use(Button);
@@ -179,13 +209,15 @@ export default create({
       handler(value) {
         if (value) {
           this.tableData = JSON.parse(JSON.stringify(this.data));
+          const { defaultValue = '' } = this.$attrs;
           // 默认值相关
-          if (this.tableData.length && this.type === 'noEdit' && this.setDefaultValue && this.$attrs.defaultValue) {
-            this.value = this.$attrs.defaultValue;
-            this.defaultSelecteRow = this.tableData.find(v => v[this.selectAttr] === this.$attrs.defaultValue).id;
+          if (this.tableData.length && this.type === 'noEdit' && this.setDefaultValue && defaultValue) {
+            this.value = defaultValue;
+            this.defaultSelecteRow = this.tableData.find(v => v[this.selectAttr] === defaultValue).id;
             this.setDefaultValue = false;
           }
-          if (this.type === 'edit' && this.setDefaultValue) {
+          
+          if (this.type === 'edit' && this.tableData.length) {
             this.setValues(this.tableData);
           }
         }
@@ -195,19 +227,8 @@ export default create({
     }
   },
   mounted() {
-    this.$nextTick(() => {
-      // document.onclick = e => {
-      //   console.log(e.path);
-      //   const focusCondition = e.path.some(v => v.innerHTML.includes('table-select') && v.innerHTML.includes('ant-select-selection__rendered'));
-      //   if (focusCondition) {
-      //     console.log('应该获取焦点');
-      //     this.$refs.selectBox.focus();
-      //   }
-      //   if (!e.path.some(v => v.className === 'ant-select-dropdown-content' || v.className === 'table-select')) {
-      //     this.isOpen = false;
-      //     this.$refs.selectBox.blur();
-      //   }
-      // };
+    this.$nextTick().then(() => {
+      document.addEventListener('mouseup', this.handlerMouseUp, true);
     });
   },
   created() {
@@ -215,27 +236,42 @@ export default create({
   },
   methods: {
     mousedown(e) {
-      // console.log(e);
       this.isOpen = true;
       if (e.target?.className === 'ant-select-selection__rendered') {
-        this.isSearch = true;
-        this.onSearch('');
+        if (this.type === 'noEdit') {
+          this.isSearch = true;
+          // 展开就搜索会导致当前选中行显示错误
+          // this.onSearch('');
+        }
         e.preventDefault();
       }
     },
+    handlerMouseUp(e) {
+      const currentDom = document.getElementById(this.id);
+      if (this.isOpen) {
+        if (!currentDom?.contains(e.target) && !e.target?.className?.includes('vxe-select-option')) {
+          if (this.type === 'noEdit') {
+            this.isOpen = false;
+          } else {
+            this.cancel();
+          }
+        }
+      }
+    },
     init() {
       this.debounceSearch = debounce(this.onSearch, 500);
+
+      // this.setValidRules();
     },
-    dropdownVisibleChange(open) {
-      // console.log('展开下拉菜单-》', open);
-      // if (open) {
-      //   // this.isOpen = true;
-      //   this.$refs.selectBox.focus();
-      // } else {
-      //   // this.isOpen = false;
-      //   this.$refs.selectBox.blur();
-      // }
-    },
+    // setValidRules() {
+    //   if (Object.keys(this.validRules).length && this.type === 'edit') {
+    //     const rules = {};
+    //     this.columns.forEach(v => {
+    //       v.field && (rules[v.field] = [{ required: true, message: `请填入${v.title}` }]);
+    //     });
+    //     validRules = rules;
+    //   }
+    // },
     search(value) {
       if (this.type === 'noEdit') {
         // 防抖
@@ -243,7 +279,8 @@ export default create({
       }
     },
     onSearch(value) {
-      if (this.isSearch) { // 防止离开焦点时触发paginationchange
+      if (this.isSearch) {
+        // 防止离开焦点时触发paginationchange
         this.$emit('update:fetching', true);
         this.page = 1;
         this.$emit('paginationchange', { page: 1, selectAttrVal: value });
@@ -278,7 +315,7 @@ export default create({
       const $table = this.$refs.xTable;
       const tableData = $table.getTableData().tableData;
       let record = {
-        id: tableData.length ? parseInt(tableData[tableData.length - 1].id) + 1 : '1'
+        id: tableData.length ? +(tableData[tableData.length - 1]?.id || 0) + 1 + '' : '1'
       };
       // if (this.tableData.length) {
       //   const row = this.tableData[0];
@@ -298,36 +335,55 @@ export default create({
       const $table = this.$refs.xTable;
       const index = $table.getRowIndex(row);
       await $table.remove(row);
-      this.value.splice(index, 1);
+      !!~index && this.value.splice(index, 1);
     },
-    saveRow() {
+    async cancel() {
+      this.isOpen = false;
+      const index = this.value?.length || 0;
       const $table = this.$refs.xTable;
       const tableData = $table.getTableData().tableData;
-      // 校验全部值不能为空
-      const isOk = tableData.every(v => {
-        return Object.values(v).every(k => k !== '' || v.length);
-      });
+      const invalidTableData = tableData.slice(index);
+      index !== tableData.length && (await $table.remove(invalidTableData));
+    },
+    async saveRow() {
+      const $table = this.$refs.xTable;
+      const tableData = $table.getTableData().tableData;
+      // 校验已经填入数据的行全部值不能为空
+      const effectiveTableData = tableData.filter(v => Object.keys(v).some(k => k !== 'id' && (v[k] !== '' || v[k].length)));
+      const invalidTableData = tableData.filter(v => !Object.keys(v).some(k => k !== 'id' && (v[k] !== '' || v[k].length))); // 失效的数据，即新增全部为空的
+
+      let isOk = false;
+      if (Object.keys(this.validRules).length && this.type === 'edit') {
+        const errMap = await $table.validate(effectiveTableData).catch(errMap => errMap);
+        isOk = !errMap ? true : false;
+      } else {
+        isOk = effectiveTableData.every(v => Object.values(v).every(k => k !== '' || v.length));
+      }
+
       if (isOk) {
         this.isOk = true;
-        if (this.selectAttr) {
-          this.value = tableData.map(v => v[this.selectAttr]);
-          this.isOpen = false;
-        } else {
-          this.setValues(tableData);
-          // 表格信息不能重复，否则会报警告
-          let newArr = this.value.reduce((pre, cur) => {
-            if (!pre.includes(cur)) {
-              return pre.concat(cur);
-            } else {
-              return pre;
-            }
-          }, []);
-          if (newArr.length !== this.value.length) {
-            this.isRepeat = true;
+        this.setValues(effectiveTableData);
+        $table.remove(invalidTableData);
+        // 去重 表格信息不能重复，否则会报警告
+        let newArr = effectiveTableData.reduce((pre, cur) => {
+          let newCur = { ...cur };
+          newCur.id && delete newCur.id;
+          const index = pre.findIndex(v => {
+            let newV = { ...v };
+            newV.id && delete newV.id;
+            return JSON.stringify(newV) === JSON.stringify(newCur);
+          });
+          if (!~index) {
+            return pre.concat(cur);
           } else {
-            this.isRepeat = false;
-            this.isOpen = false;
+            return pre;
           }
+        }, []);
+        if (newArr.length !== this.value.length) {
+          this.isRepeat = true;
+        } else {
+          this.isRepeat = false;
+          this.isOpen = false;
         }
       } else {
         this.isOk = false;
@@ -336,10 +392,18 @@ export default create({
     setValues(tableData) {
       this.value = tableData.map(v => {
         let newV = { ...v };
-        Object.keys(v).map(k => {
-          const cellObj = this.columns.find(j => j.field === k);
-          if (cellObj?.editRender?.name.includes('select')) {
-            newV[k] = cellObj.editRender.options.find(q => q.value == v[k]).label;
+        Object.keys(v).forEach(k => {
+          if (!this.selectAttr || this.selectAttr.includes(k)) {
+            const cellObj = this.columns.find(j => j.field === k);
+            if (cellObj?.editRender?.name.includes('select')) {
+              newV[k] = cellObj.editRender.options.find(q => q.value == v[k])?.label || '';
+            }
+            if (cellObj?.slots?.edit) {
+              newV[k] = cellObj.editRender.options.find(q => q.value == v[k])?.label || '';
+            }
+          }
+          if (this.selectAttr && !this.selectAttr.includes(k)) {
+            delete newV[k];
           }
         });
         if (newV.id) delete newV.id;
@@ -354,6 +418,9 @@ export default create({
       await $table.remove(tableData[index]);
       this.value = value;
     }
+  },
+  beforeDestroy() {
+    document.removeEventListener('mouseup', this.handlerMouseUp, true);
   }
 });
 </script>
@@ -404,6 +471,13 @@ export default create({
         font-size: 14px;
       }
     }
+
+    .ant-select-selection--single {
+      height: 28px;
+      .ant-select-selection__rendered {
+        line-height: 28px;
+      }
+    }
   }
   .vxe-cell .vxe-default-input,
   .vxe-cell .vxe-default-select,
@@ -415,17 +489,6 @@ export default create({
     height: 28px;
   }
 }
-// @{deep} .ant-pagination-prev,
-// @{deep} .ant-pagination-next,
-// @{deep} .ant-pagination-jump-prev,
-// @{deep} .ant-pagination-item,
-// @{deep} .ant-pagination-options-quick-jumper,
-// @{deep} .ant-select-selection--single,
-// @{deep} .ant-pagination-jump-next {
-//   min-width: 30px;
-//   height: 30px;
-//   line-height: 30px;
-// }
 @{deep} .table-select .ant-pagination-item-active a {
   color: #5585f5 !important;
 }

package/packages/table-filter/src/base-search-com/BaseSearch.vue

@@ -139,7 +139,8 @@
                 @input="$emit('input', $event.target.value)"
               >
                 <a-button slot="enterButton" type="primary">
-                  <svg-icon icon-class="xitongtubiaosousuo"></svg-icon>
+                  <a-icon type="search" />
+                  <!-- <svg-icon icon-class="xitongtubiaosousuo"></svg-icon> -->
                 </a-button>
               </a-input-search>
             </li>
@@ -218,7 +219,6 @@
                   <template v-if="item.type == 'ADD' || item.type == 'BATCH'">
                     <a-button
                       v-show="visibleBtn(item) && !item.isHide"
-                      v-preventReClick
                       @click.prevent.stop="showDrawer(item, j)"
                       class="btn-custom-class"
                       style="margin: 0 8px 8px 0"
@@ -250,7 +250,6 @@
                   <template v-else-if="isShowRowTileBtnItem(item)">
                     <a-button
                       v-show="visibleBtn(item) && !item.isHide"
-                      v-preventReClick
                       @click.prevent.stop="clickBtn(clickRowData, item, clickRowData.my_index, undefined, j)"
                       class="btn-custom-class"
                       style="margin: 0 8px 8px 0"
@@ -337,7 +336,6 @@
               <!-- 行内编辑对应生成的（保存、取消）按钮 -->
               <template v-if="visibleInlineOperateBtn">
                 <a-button
-                  v-preventReClick
                   :style="{ display: isInlineOperating ? 'inline-block' : 'none' }"
                   @click="inlineEditClick"
                   class="btn-custom-class"
@@ -346,7 +344,7 @@
                 >
                   保存
                 </a-button>
-                <a-button v-preventReClick :style="{ display: isInlineOperating ? 'inline-block' : 'none' }" @click="inlineEditCancel" class="btn-custom-class" style="margin: 0 8px 8px 0">
+                <a-button :style="{ display: isInlineOperating ? 'inline-block' : 'none' }" @click="inlineEditCancel" class="btn-custom-class" style="margin: 0 8px 8px 0">
                   取消
                 </a-button>
               </template>
@@ -373,6 +371,9 @@
  * 3、右侧快速弹框保存搜索函数onSave（obj）;
  * 完整例子：<BaseSearch :onSearch='onSearch' @changeSearch='changeSearch' @onSave='onSave'/>
  */
+import moment from 'moment';
+import 'moment/locale/zh-cn';
+
 import _ from 'lodash';
 import vexutils from '@/utils/vexutils';
 import { Button, Icon, Dropdown, Select, Upload, DatePicker, Input, Menu } from 'ant-design-vue';
@@ -423,6 +424,18 @@ const EVALUATEList = [
   }
 ];
 
+const BTNOBJ = {
+  // 按钮icon 映射
+  copy: 'copy',
+  pencil: 'edit',
+  delete: 'delete',
+  add: 'plus-circle',
+  download: 'download',
+  label: 'tag',
+  queding: 'check',
+  del: 'close'
+};
+
 export default create({
   name: 'base-search',
   mixins: [durationMixin, $utils, filterApiFn, tableSearchCon],
@@ -439,7 +452,10 @@ export default create({
     paramsData: Object,
     // downLoad: Function,
     showButtonTop: [String, Number],
-    showSettings: Object,
+    showSettings: {
+      type: Object,
+      default: ()=>({})
+    },
     clickRowData: Object,
     value: String,
     searchFieldList: {
@@ -559,6 +575,7 @@ export default create({
     [Select.name]: Select,
     [Upload.name]: Upload,
     [DatePicker.name]: DatePicker,
+    [DatePicker.RangePicker.name]: DatePicker.RangePicker,
     [Input.name]: Input,
     [Input.Search.name]: Input.Search,
     [Menu.name]: Menu,
@@ -659,7 +676,7 @@ export default create({
       return function(item) {
         if (!item.showTime) return false;
         return {
-          defaultValue: [this.$moment('00:00:00', 'HH:mm:ss'), this.$moment('23:59:59', 'HH:mm:ss')]
+          defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')]
         };
       };
     },
@@ -755,7 +772,8 @@ export default create({
       printPrevFinish: false,
       printBtnPrevFnWatchTimeoutTimer: null,
       printBtn: {},
-      groupBtnObj: {}
+      groupBtnObj: {},
+      btnObj: BTNOBJ
     };
   },
   created() {
@@ -1077,7 +1095,6 @@ export default create({
         _type_: btn.type
       };
       this.$emit('btnEvent', btnData);
-      this.handleTopBtnTracher(btn, j);
     },
 
     // 筛选分类相关的
@@ -1126,7 +1143,6 @@ export default create({
         return;
       }
       this.$emit('clickBtn', data, item, index);
-      this.handleTopBtnTracher(item, j);
     },
     clickGroupBtn(btn, j) {
       this.clickBtn(this.clickRowData, btn, this.clickRowData.my_index, undefined, j);
@@ -1174,18 +1190,6 @@ export default create({
       this.$nextTick(() => {
         this.formatRowBtnList();
       });
-
-      if (f != -1) {
-        let cur = this.viewList[f];
-        // 埋点
-        this.$_handleTracherLog('切换列表视图', {
-          列表ID: this.tableId || '',
-          列表名称: this.tableName || this.$attrs?.tableName || '',
-          列表视图ID: cur?.id,
-          列表视图名称: cur?.name,
-          列表视图位置顺序: f
-        });
-      }
     },
     isShowSetting(v) {
       if (v == 'hideSettingBtn') {
@@ -1629,6 +1633,10 @@ export default create({
       if (!Array.isArray(arr)) return;
       arr.forEach(el => {
         el.setting = typeof el.setting == 'string' ? JSON.parse(el.setting) : el.setting;
+        // 兼容处理
+        if(!el.settingObj && typeof el.setting === 'object'){
+          el.settingObj = el.setting
+        }
         const attr = el?.settingObj?.attr || '';
         // 映射优先级最高
         if (el.setting?.showSetting?.length) {

package/packages/table-filter/src/classification/Classification-com.vue

@@ -382,11 +382,13 @@
               v-if="hideConditionChangeBtn != 1"
             >
               <a-icon type="swap" />
-              {{ $t("1.1.5.2") }}
+              <!-- {{ $t("1.1.5.2") }} -->
+              切换
             </span>
             <span @click="handleSettingShow" v-if="hideConditionChangeSetting != 1">
               <a-icon type="setting" />
-              {{ $t("1.1.5.3") }}
+              <!-- {{ $t("1.1.5.3") }} -->
+              设置
             </span>
           </div>
         </div>
@@ -987,6 +989,8 @@ export default create({
           this.tabConditionList = conditionMapTemp.tabConditionList || []; // 获取页签tab
           this.tabIndex = conditionMapTemp.tabConditionList && conditionMapTemp.tabConditionList.findIndex(item => item.isDefault); // 查询默认选中的标签
           // }
+          // TODO:
+          // this.getTableCondiTionList()
           if (this.$attrs.tableOptions?.filterCondition?.displayCategory && first) {
             resolve({
               name: this.$attrs.tableOptions?.filterCondition?.name,

package/packages/table-filter/src/components/multi-select/multi-select.vue

@@ -7,7 +7,7 @@
     :maxTagCount="handleMaxTagCount"
     :maxTagPlaceholder="handleMaxTag(item)"
     showSearch
-    :filterOption="$utils.filterOption"
+    :filterOption="filterOption"
     v-model="item.value"
     @search="handleWordBookSearch($event, item)"
     @dropdownVisibleChange="dropdownVisibleChange($event, item)"

package/packages/table-filter/src/components/search-condition/SearchCondition.vue

@@ -237,8 +237,10 @@ import utils from '@/utils/utils-map';
 import FIELDTYPELIST from './fieldTypeList';
 import svgIcon from '@/component/svg/index.vue';
 import create from '@/core/create';
+import { filterApiFn } from '~/table-filter/src/mixins/mixins';
 export default create({
   name: 'search-condition',
+  mixins: [filterApiFn],
   props: {
     isSee: Boolean,
     visible: Boolean,

package/packages/table-filter/src/quick-search/QuickSearch.vue

@@ -1088,7 +1088,7 @@ export default create({
         wordbookType: wordbookType || "WORDBOOK",
         ...obj
       };
-      return this.axios.post(url, this.$qs.stringify(params)).then(res => {
+      return this.handleGetConfigApi(params, 'requestGetWordbookData', { fields: o }).then(res => {
         return res;
       });
     },
@@ -1411,14 +1411,6 @@ export default create({
         };
         this.saveTableCondiTion(params);
 
-        // 埋点
-        this.$_handleTracherLog("列表高级搜索保存到分类", {
-          列表ID: this.$attrs?.tableId || "",
-          列表名称: this.tableName || this.$attrs?.tableName || "",
-          父级分类名称: displayCategory,
-          子级分类名称: values.classname,
-          查询条件: conObj
-        });
       });
     },
     handleParentNamesAdd(e) {
@@ -1472,19 +1464,30 @@ export default create({
       this.$message.error("该分类下有已有数据，请删除该分类下的筛选集后重试！");
     },
     // 7.12保存列表搜索分类
-    saveTableCondiTion(params) {
-      let url = `/tableList/saveTableCondiTion`;
-      this.axios.post(url, this.$qs.stringify(params)).then(({ data }) => {
-        if (data.result == "SUCCESS") {
-          this.showInner = false;
-          this.formInner.resetFields();
-          this.$emit("updateTableCondiTion");
-          this.clearData();
-          this.closeModal();
-        } else {
-          this.$message.error(data.resultMsg);
-        }
-      });
+    async saveTableCondiTion(params) {
+      // let url = `/tableList/saveTableCondiTion`;
+      // this.axios.post(url, this.$qs.stringify(params)).then(({ data }) => {
+      //   if (data.result == "SUCCESS") {
+      //     this.showInner = false;
+      //     this.formInner.resetFields();
+      //     this.$emit("updateTableCondiTion");
+      //     this.clearData();
+      //     this.closeModal();
+      //   } else {
+      //     this.$message.error(data.resultMsg);
+      //   }
+      // });
+      try {
+        let res = await this.handleGetConfigApi(params, 'requestSaveTableCondiTion');
+        if (!res) return;
+        this.showInner = false;
+        this.formInner.resetFields();
+        this.$emit("updateTableCondiTion");
+        this.clearData();
+        this.closeModal();
+      } catch (error) {
+        console.log(error)
+      }
     },
     cancelSaveToCalss() {
       this.showInner = false;

package/src/style/style.less

@@ -15,8 +15,8 @@ h3,
 h4,
 p,
 pre {
-  margin: 0;
-  padding: 0;
+  // margin: 0;
+  // padding: 0;
 }
 body {
   font-size: 14px;