cnhis-design-vue 2.1.79 → 2.1.81

package/packages/select-tag/select-label.vue

@@ -0,0 +1,274 @@
+<template>
+  <div class="label-page">
+    <div class="tag-label">
+      <a-tag
+        v-for="v in outSelectedList"
+        :key="`${v.classifyId}-${v.labelCode}`"
+        :closable="true"
+        @close="closeTag(v)"
+        :style="formatActiveStyle(v)"
+      >
+        {{ v.labelShowText }}
+      </a-tag>
+      <span v-if="!explicit" class="form-add-icon form-add-icon-label" @click="handleEditLabel">
+        <a-icon class="add-icon" type="plus-circle" />
+        新增
+      </span>
+    </div>
+    <div v-if="explicit">
+      <labelFormContent
+        ref="labelFormContent"
+        :categoryList="categoryList"
+				:selectedList="outSelectedList"
+				:isChangeWindow="isChangeWindow"
+				:explicit="explicit"
+        :tagRequestMap="tagRequestMap"
+				@explicitOnChange="explicitOnChange"
+      ></labelFormContent>
+    </div>
+
+    <!-- 弹窗 -->
+    <a-modal
+      class="label-form-modal-wrap modal-wrap select-tag-standard-modal standard-modal-white"
+      v-model="labelVisible"
+      @ok="handleSaveLabel"
+      @cancel="handleLabelCancel"
+      :maskClosable="false"
+      :destroyOnClose="true"
+      :width="modalWidth"
+      :cancelText="'取消'"
+      :okText="'确定'"
+      :bodyStyle="{
+        height: modalHeight,
+        maxHeight,
+        position: 'relative'
+      }"
+      :class="{ 'modal-screen': isChangeWindow }"
+      :closable="false"
+      centered
+      wrapClassName="crm-form-label-modal"
+    >
+      <template slot="title">
+        <div>
+          选择标签
+        </div>
+        <div class="svg-wrap">
+          <svg-icon
+            @click="changeModalWindow"
+            :icon-class="
+              isChangeWindow
+                ? 'xitongtubiaodaohangtubiaozuixiaohua'
+                : 'xitongtubiaodaohangtubiaozuidahua'
+            "
+          ></svg-icon>
+          <svg-icon
+            :icon-class="'xitongtubiaodaohangtubiaoguanbi'"
+            @click="handleLabelCancel"
+          ></svg-icon>
+        </div>
+      </template>
+      <labelFormContent
+        ref="labelFormContent"
+        :categoryList="categoryList"
+        :selectedList="outSelectedList"
+        :isChangeWindow="isChangeWindow"
+        :explicit="explicit"
+        :tagRequestMap="tagRequestMap"
+        @explicitOnChange="explicitOnChange"
+      ></labelFormContent>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { Tooltip, Icon, Button, Input, Tag, Modal } from 'ant-design-vue';
+import labelFormContent from './labelFormContent';
+import SvgIcon from '@/component/svg/index.vue';
+import utils from '@/utils/utils-map';
+import create from '@/core/create';
+/**
+ * @onChange="xxx" 获取保存的值
+ */
+export default create({
+  name: 'select-tag',
+  components: {
+    labelFormContent,
+    SvgIcon,
+    [Input.name]: Input,
+    [Icon.name]: Icon,
+    [Tooltip.name]: Tooltip,
+    [Button.name]: Button,
+    AModal: Modal,
+    [Tag.name]: Tag,
+    [Tag.CheckableTag.name]: Tag.CheckableTag
+  },
+  data() {
+    return {
+      labelVisible: false,
+      isChangeWindow: false,
+      modalWidth: '763px',
+      modalHeight: '404px',
+      maxHeight: '404px',
+
+      outSelectedList: [],
+    };
+  },
+  props: {
+    // 选中的标签
+    selectedList: {
+      type: Array,
+      default: () => []
+    },
+    // 标签列表
+    categoryList: {
+      type: Array,
+      default: () => []
+    },
+    // 标签是否外显
+    explicit:{
+      type: Boolean,
+      default: false
+    },
+    // 接口请求状态
+    tagRequestMap: {
+      type: Object,
+      default: () => ({
+        status: true,
+        resultMsg: ''
+      })
+    }
+  },
+
+  watch: {
+    selectedList: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val) {
+          let list = Array.isArray(val) ? val : [];
+          this.outSelectedList = JSON.parse(JSON.stringify(list));
+        }
+      }
+    }
+  },
+  methods: {
+    formatActiveStyle(activeItem) {
+      return {
+        background: activeItem.backgroundColor,
+        color: '#fff',
+        borderColor: activeItem.backgroundColor
+      }
+    },
+    closeTag(selectItem) {
+      const selectedList = this.outSelectedList || [];
+      const fdIndex = selectedList.findIndex(sItem => sItem.classifyId == selectItem.classifyId && sItem.labelCode == selectItem.labelCode);
+      if (fdIndex > -1) {
+        selectedList.splice(fdIndex, 1);
+      }
+      this.outSelectedList = selectedList;
+      this.$emit('onChange', [...selectedList]);
+    },
+    handleEditLabel(type) {
+      if(!this.explicit) {
+        this.labelVisible = true;
+      }
+    },
+    handleLabelCancel() {
+      if(this.explicit) return;
+      this.modalWidth = '763px';
+      this.modalHeight = '404px';
+      this.maxHeight = '404px';
+      this.isChangeWindow = false;
+      this.labelVisible = false;
+    },
+    changeModalWindow() {
+      this.isChangeWindow = !this.isChangeWindow;
+      let docHeight = document.body.clientHeight;
+      this.modalWidth = this.modalWidth === '763px' ? `100%` : '763px';
+      this.modalHeight = this.modalHeight === '404px' ? `${docHeight - 110}px` : '404px';
+      this.maxHeight = this.modalHeight === 'auto' ? '404px' : 'none';
+    },
+    handleSaveLabel() {
+      this.$refs.labelFormContent?.handleLabelForm(selectList => {
+        this.$emit('onChange', [...selectList]);
+        this.outSelectedList = selectList;
+        this.handleLabelCancel();
+      });
+    },
+    // 标签外显发生变化
+    explicitOnChange(){
+      this.handleSaveLabel();
+    }
+  }
+});
+</script>
+<style lang="less" scoped>
+.tag-label {
+  /deep/ .ant-tag {
+    margin-bottom: 4px;
+    border: 1px solid #f1f1f1;
+    .anticon-close {
+      color: #fff;
+    }
+  }
+  .form-add-icon-label {
+    color: #2d7aff;
+    cursor: pointer;
+  }
+}
+
+
+</style>
+<style lang="less">
+// 弹框规范
+.select-tag-standard-modal {
+  box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.14);
+  border-radius: 8px;
+  padding-bottom: 0px;
+  .ant-modal-content {
+    border-radius: 8px;
+  }
+  .ant-modal-header {
+    padding: 14px 16px;
+    height: 52px;
+    border-radius: 8px 8px 0 0;
+
+    .ant-modal-title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: #000000;
+      font-size: 16px;
+      .svg-wrap {
+        right: 16px;
+        svg {
+          font-size: 14px;
+          cursor: pointer;
+        }
+        svg + svg {
+          margin-left: 16px;
+        }
+      }
+    }
+  }
+  .ant-modal-footer {
+    box-sizing: border-box;
+    height: 52px;
+    border-radius: 0 0 8px 8px;
+    .ant-btn {
+      padding: 0 12px;
+    }
+  }
+  .ant-modal-close-x {
+    height: 54px;
+  }
+  .change-screen-svg {
+    top: -1px;
+  }
+  &.has-mask {
+    .ant-modal-close-icon {
+      color: #666;
+    }
+  }
+}
+</style>

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

@@ -54,7 +54,7 @@
           <!-- start--筛选外显--start -->
           <template v-for="item in outSearchFieldList">
             <li class="outQuickSearch-li" v-if="item.isRender" :key="item._frontId">
-              <RenderWidget style="margin: 0 8px 8px 0" :cfg="item" v-model="item.value" @outFilterChange="outFilterChange" />
+              <RenderWidget style="margin: 0 8px 8px 0" :cfg="item" v-model="item.value" source="baseSearch" :filterApiConfig="filterApiConfigOutSearch" @outFilterChange="outFilterChange" />
             </li>
             <outQuickSearch v-else :key="item.id + item.random_key" :item="item" :ref="item.columnName + item.random_key" :filterApiConfig="filterApiConfigOutSearch" @outFilterChange="outFilterChange"></outQuickSearch>
           </template>
@@ -412,8 +412,10 @@ import PrintBtn from '~/button/src/ButtonPrint/index';
 
 import outQuickSearch from '../components/out-quick-search/out-quick-search';
 import utils from '@/utils/utils-map';
-import { durationMixin, $utils, filterApiFn, outQuickSearchFn } from '../mixins/mixins';
+import { durationMixin, $utils, filterApiFn, outQuickSearchFn, outQuickSearchDefCommon } from '../mixins/mixins';
 import tableSearchCon from '../mixins/tableSearchCon';
+import OutQuickMethod from '../mixins/out-quick-method'
+import dynamicMethod from '../components/render-widget/mixins/dynamic-method'
 import svgIcon from '@/component/svg/index.vue';
 import 'text-security/text-security.css';
 import create from '@/core/create';
@@ -466,7 +468,7 @@ const BTNOBJ = {
 
 export default create({
   name: 'base-search',
-  mixins: [durationMixin, $utils, filterApiFn, tableSearchCon, outQuickSearchFn],
+  mixins: [durationMixin, $utils, filterApiFn, tableSearchCon, outQuickSearchFn, outQuickSearchDefCommon, OutQuickMethod, dynamicMethod],
   directives: { resize, preventReClick },
   props: {
     width: {
@@ -1763,6 +1765,10 @@ export default create({
       inputDom.blur();
     },
     handleRequestedLabel(v) {
+      let requestedLabel = this.filterApiConfig?.requestedLabel
+      if(requestedLabel && typeof requestedLabel === 'function') {
+        return this.handleGetConfigApi(v, 'requestedLabel')
+      }
       let params = { type: v, pageSize: 10000 };
       return this.axios.get('/label/list', { params: params });
     },
@@ -1801,18 +1807,8 @@ export default create({
       }
 
       // 如有配置默认值
-      const isSetDefVal = this.outSearchFieldList.some(v => {
-        if (this.isRender(v)) {
-          return this.isExistDefValByRenderWidget(v);
-        }
-        return !!v.explicitDefaultVal
-      });
-      if (isSetDefVal) {
-        this.$emit('outSearchInit');
-        if ('reset' != config?.type) {
-          this.outFilterChange({ type: 'outSearchInit' });
-        }
-      }
+      this.isOut = true;
+      this.handleDefVal(config)
     },
     dealOutFilterHideBtn() {
       if (!this.isShowSetting('buttonAdaption') && this.outSearchFieldList.length > 0) {

package/packages/table-filter/src/components/TextOverTooltip.vue

@@ -1,7 +1,17 @@
 <template>
   <div class="text-over-tooltip-components">
-    <a-tooltip :effect="effect" :disabled="isDisabledTooltip" :title="curContent" :placement="placement">
-      <div class="ellipsis" :class="className" @mouseover="onMouseOver(refName)">
+    <a-tooltip
+      :effect="effect"
+      :visible="isDisabledTooltip"
+      :title="curContent"
+      :placement="placement"
+    >
+      <div
+        class="ellipsis"
+        :class="className"
+        @mouseover="onMouseOver(refName)"
+        @mouseout="onMouseOut"
+      >
         <i :ref="refName">
           <slot></slot>
           <i>{{ content }}</i>
@@ -12,10 +22,10 @@
 </template>
 
 <script>
-import { Tooltip } from 'ant-design-vue';
+import { Tooltip } from "ant-design-vue";
 import vexutils from '@/utils/vexutils';
 export default {
-  name: 'TextOverTooltip',
+  name: "TextOverTooltip",
   components: {
     [Tooltip.name]: Tooltip
   },
@@ -30,27 +40,27 @@ export default {
     effect: {
       type: String,
       default: () => {
-        return 'dark';
+        return "dark";
       }
     },
     // Tooltip 的出现位置top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
     placement: {
       type: String,
       default: () => {
-        return 'top';
+        return "top";
       }
     },
-    tooltipTitle: { type: [Number, String], default: '' },
+    tooltipTitle: { type: [Number, String], default: "" },
     isAlias: Boolean
   },
   data() {
     return {
-      isDisabledTooltip: true // 是否需要禁止提示
+      isDisabledTooltip: false // 是否需要禁止提示
     };
   },
   computed: {
     curContent() {
-      let res = this.tooltipTitle || this.content || '';
+      let res = this.tooltipTitle || this.content || "";
       if (vexutils.isNumber(res)) {
         return res.toString();
       }
@@ -61,13 +71,16 @@ export default {
     // 移入事件: 判断内容的宽度contentWidth是否大于父级的宽度
     onMouseOver(str) {
       if (this.isAlias) {
-        this.isDisabledTooltip = false;
+        this.isDisabledTooltip = true;
         return;
       }
       let parentWidth = this.$refs[str].parentNode.offsetWidth;
       let contentWidth = this.$refs[str].offsetWidth;
       // 判断是否禁用tooltip功能
-      this.isDisabledTooltip = contentWidth <= parentWidth;
+      this.isDisabledTooltip = contentWidth > parentWidth;
+    },
+    onMouseOut() {
+      this.isDisabledTooltip = false;
     }
   }
 };

package/packages/table-filter/src/components/age-com/index.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="container age-com" :class="{ 'form-item-disabled': isDetail }">
     <template v-if="showType.includes('YYYY')">
-      <a-input-number :value="ageValue.year" @change="handleYearChange" :disabled="isDisabled || isDetail" :min="0" />
+      <a-input-number :value="ageValue.year" @change="handleYearChange" :disabled="isDisabled || isDetail" :min="0" placeholder="请输入岁" />
       <span class="age-com-suffix">岁</span>
     </template>
     <template v-if="showType.includes('MM')">
-      <a-input-number :value="ageValue.month" @change="handleMonthChange" :disabled="isDisabled || isDetail" :min="0" />
+      <a-input-number :value="ageValue.month" @change="handleMonthChange" :disabled="isDisabled || isDetail" :min="0" placeholder="请输入月" />
       <span class="age-com-suffix">月</span>
     </template>
     <template v-if="showType.includes('DD')">
-      <a-input-number v-if="showType.includes('DD')" :value="ageValue.day" @change="handleDayChange" :disabled="isDisabled || isDetail" :min="0" />
+      <a-input-number v-if="showType.includes('DD')" :value="ageValue.day" @change="handleDayChange" :disabled="isDisabled || isDetail" :min="0" placeholder="请输入日" />
       <span class="age-com-suffix">日</span>
     </template>
   </div>

package/packages/table-filter/src/components/checkbox-group/CheckboxGroup.vue

@@ -0,0 +1,53 @@
+<template>
+  <CheckboxGroup v-bind="$attrs" :value="valueCp" @change="onChange"></CheckboxGroup>
+</template>
+
+<script>
+import { Checkbox } from 'ant-design-vue';
+
+export default {
+  inheritAttrs: false,
+  components: {
+    CheckboxGroup: Checkbox.Group,
+  },
+  props: {
+    value: {
+      type: [Array, String, Number],
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  model: {
+    prop: "value",
+    event: "update:value"
+  },
+  computed: {
+    valueCp: {
+      set(val) {
+        this.$emit("update:value", val);
+      },
+      get() {
+        return Array.isArray(this.value) ? this.value : this.value ? [this.value] : [];
+      }
+    }
+  },
+  methods: {
+    filterNewVal(val) {
+      return val.filter((v) => !this.valueCp.includes(v));
+    },
+    onChange(val) {
+      if (!this.multiple && Array.isArray(val)) {
+        let res = this.filterNewVal(val)?.[0]
+        this.valueCp = res ? [res]: [];
+        return;
+      }
+      this.valueCp = val;
+    },
+  },
+}
+
+</script>
+<style lang='less'>
+</style>

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

@@ -3,7 +3,7 @@
     :mode="mode"
     v-if="item.com == 'SelectMui'"
     :placeholder="item.placeholder || `请选择${item.alias || item.title}`"
-    :style="{width: `${item.advanceColWidth||160}px`}"
+    :style="selectWidth"
     :dropdownMatchSelectWidth="false"
     :maxTagCount="handleMaxTagCount(item)"
     :maxTagPlaceholder="handleMaxTag(item)"
@@ -85,6 +85,12 @@ export default {
   },
 
   computed: {
+    selectWidth(){
+      if(this.source !== 'quickSearch' || this.item?.advanceColWidth) {
+        return {width: `${this.item?.advanceColWidth || 160}px`}
+      }
+      return {width: '100%'}
+    },
     handleMaxTagCount() {
       return function(item) {
         let len = this.maxTagPlaceholder(item);

package/packages/table-filter/src/components/out-quick-search/out-quick-search.vue

@@ -42,7 +42,7 @@
       @change="value => rangePickerChange(value, item)"
       @ok="outFilterChange"
       v-model="item.value"
-      :placeholder="[`${item.alias || item.title}起始日期`, `${item.alias || item.title}截止日期`]"
+      :placeholder="[`起始${item.alias || item.title}`, `截止${item.alias || item.title}`]"
       v-if="item.com == 'DatePicker'"
       style="margin: 0 8px 8px 0"
       :showTime="handlePickerShowTime(item)"
@@ -116,7 +116,8 @@
 import multiSelect from '../multi-select/multi-select';
 import cTreeSelect from '../c-tree-select/tree-select';
 import { filterApiFn } from '../../mixins/mixins';
-import wordBookutils from '../../mixins/wordBookutils';
+// import wordBookutils from '../../mixins/wordBookutils';
+import OutQuickMethod from '../../mixins/out-quick-method'
 import moment from 'moment';
 import { Input, DatePicker} from 'ant-design-vue';
 const EVALUATEList = [
@@ -148,7 +149,7 @@ const EVALUATEList = [
 ];
 export default {
   name: "OutQuickSearch",
-  mixins: [filterApiFn],
+  mixins: [filterApiFn, OutQuickMethod],
   components: {
     multiSelect,
     cTreeSelect,
@@ -180,126 +181,11 @@ export default {
   watch: {},
   // 生命周期
   created() {},
-  mounted() {
-    this.init();
-  },
+  mounted() {},
 
   // 方法
   methods: {
 
-    init(){
-      let item = this.item;
-      let df = item.explicitDefaultVal;
-      if(item.com == 'SelectMui' && df){
-        this.dropdownVisibleChange(true, item, {type:'hasDefaultInit'})
-      }
-    },
-
-    handleWordBookSearch(value, item, config = {}) {
-      if (item.comType != "SelectMuiWordBook") return;
-      let curAutograph = item.settingObj.wordbook && item.settingObj.wordbook.autograph;
-      let params = {
-        keyword: value,
-        autograph: curAutograph
-      };
-      let obj = {};
-      let p = item?.setting?.wordbook?.params || undefined;
-      if (p) {
-        item.setting.wordbook.params.forEach(item => {
-          obj[item.p_name] = item.p_value;
-        });
-      }
-      let rp = { ...params, ...obj, ...config }
-      this.getWordbookData(item.setting.wordbook, rp).then(({ data }) => {
-        this.handleWordbookData(item, data, rp);
-      });
-    },
-    dropdownVisibleChange(open, item, config={}) {
-      if (item.comType != "SelectMuiWordBook") return;
-      if (open) {
-        let obj = {};
-        if (item.setting.wordbook.params) {
-          item.setting.wordbook.params.forEach(item => {
-            obj[item.p_name] = item.p_value;
-          });
-        }
-        if (item.settingObj.wordbook) {
-          obj.autograph = item.settingObj.wordbook.autograph;
-        }
-        let df = item.explicitDefaultVal;
-        if(df != 'firstOption'){
-          obj.keyword = df;
-        }
-        this.getWordbookData(item.setting.wordbook, obj).then(({ data }) => {
-          this.handleWordbookData(item, data, obj);
-          if('hasDefaultInit' == config?.type){
-            this.outFilterChange({type:'outSearchInit'});
-          }
-        });
-      }
-    },
-    handleWordbookData(item, data, params) {
-      this.$set(item, "hasFieldList", false);
-      const {rows,hasFieldList,searchPageConfig} = wordBookutils.handleWordbookData(item,data,params);
-      this.$set(item, "hasFieldList", hasFieldList);
-      this.$set(item, "dataSource", rows);
-       let showKeys = item?.setting?.wordbook?.showKeys || [];
-      item.searchPageConfig = Object.assign(item.searchPageConfig, searchPageConfig);
-      // 初始化获取值
-      if(!this.initSearch){
-        let df = item.explicitDefaultVal;
-        if(df){
-          let defval = [];
-          if(df === 'firstOption'){
-           let [v,k] = rows;
-          //  如果有添加提示标题，取第二个
-           if(showKeys.length > 0 && item.hasFieldList){
-             v = k;
-           }
-           v && (defval = [v.myName])
-          } else {
-            let f = rows.find(v => v.myName.includes(df));
-            if(f){
-              defval = [f.myName]
-            }
-          }
-          item.value = [...defval]
-          item.search_DefaultValue= [...defval]
-        }
-        this.initSearch = true;
-      }
-    },
-    getWordbookData(o, obj) {
-      let { id, filterKeys, wordbookType } = o;
-      this.fetchingWordbook = true;
-      let resFieldKeys = Array.isArray(filterKeys) ? JSON.stringify(filterKeys) : filterKeys;
-      let url = `/tableReader/getWordbookData`;
-      let params = {
-        wordbookId: id,
-        fieldKeys: resFieldKeys,
-        wordbookType: wordbookType || "WORDBOOK",
-        asyncCount: 1, // 开启性能模式
-        ...obj
-      };
-      return this.handleGetConfigApi(params, 'requestGetWordbookData', { fields: o }).then(res => {
-        this.fetchingWordbook = false;
-        if(typeof res.data === 'object'){
-          res.data.reqParams =  params;
-        }
-        return res;
-      }).catch(() => {
-        this.fetchingWordbook = false;
-      });
-      // return this.axios
-      //   .post(url, this.$qs.stringify(params))
-      //   .then(res => {
-      //     this.fetchingWordbook = false;
-      //     return res;
-      //   })
-      //   .catch(() => {
-      //     this.fetchingWordbook = false;
-      //   });
-    },
     rangePickerChange(value, item) {
       if (item.showTime) {
         if (!value.length && item.showTime) {