cnhis-design-vue 2.1.79 → 2.1.80

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

@@ -6,11 +6,8 @@
       <div
         class="quick-item"
         v-for="item in quickSearch"
-        :key="item.sid"
-        :class="{
-          'quick-block':
-            item.con == 'DATE' || item.con == 'BIRTHDAY' || item.con == 'CONVERT' || item.LABELAttr || item._isBlock
-        }"
+        :key="item.sid || item.columnName"
+        :class="{ 'quick-block': quickClassName(item) }"
       >
         <div class="quick-row">
           <!-- title -->
@@ -18,7 +15,12 @@
             class="quick-item-title"
             :class="{ 'quick-item-title-default': source !== 'editTable' }"
           >
-            <span>{{ handleName(item, "title") }}&nbsp;&nbsp;</span>
+            <!-- <span>{{ handleName(item, "title") }}&nbsp;&nbsp;</span> -->
+            <text-over-tooltip
+              :refName="`quick-search-title-${item.columnName}`"
+              class="quick-search-title-tool-tip"
+              :content="item.alias || item.title"
+            ></text-over-tooltip>
             <a-tooltip
               v-if="searchFieldLimit[item.columnName] && searchFieldLimit[item.columnName].tips"
               :title="searchFieldLimit[item.columnName].tips"
@@ -29,7 +31,7 @@
           </div>
           <div class="quick-item-col" :class="{ 'quick-item-col-default': source !== 'editTable' }">
             <!-- 直接渲染组件 -->
-            <RenderWidget v-if="item.isRender" :cfg="item" v-model="item.value" />
+            <RenderWidget v-if="item.isRender" :cfg="item" v-model="item.value" source="quickSearch" :filterApiConfig="filterApiConfig" />
             <!-- age -->
             <!-- TODO: 清除，跨表 -->
             <div v-else-if="item.AGEAttr" class="age-container">
@@ -89,12 +91,12 @@
                   </div>
                 </div>
               </slot>
-              <a-input v-else style="width: 200px" v-model="item.inputVal" allowClear></a-input>
+              <a-input v-else style="width: 100%" v-model="item.inputVal" allowClear :placeholder="item.placeholder || `请输入${item.alias || item.title}`"></a-input>
             </div>
             <!-- label -->
 
             <!-- EVALUATE -->
-            <div v-else-if="item.EVALUATEAttr">
+            <div v-else-if="item.EVALUATEAttr" class="evaluate-attr-container">
               <template v-for="tag in EVALUATEList">
                 <a-checkable-tag
                   :key="tag.value"
@@ -109,7 +111,7 @@
             <!-- EVALUATE -->
 
             <!-- NUMBERFiled -->
-            <div v-else-if="item.NUMBERFiled" class="ant-calendar-picker" style="width: 300px">
+            <div v-else-if="item.NUMBERFiled" class="ant-calendar-picker" style="width: 100%">
               <span
                 class="ant-calendar-picker-input ant-input num-picker"
                 :class="{ 'num-picker-unit': item.inputUnit }"
@@ -159,25 +161,25 @@
                 <template v-if="showPercent(item)">
                   <a-input-number
                     class="CL-input"
-                    :style="`width: ${getEleWidth(item)}`"
+                    :style="`width: 100%`"
                     v-model="item.CL"
                     :min="0"
                     :max="100"
                     allowClear
-                    :placeholder="item.placeholder"
+                    :placeholder="item.placeholder || `请输入${item.alias || item.title}`"
                   />
                 </template>
                 <template v-else>
                   <a-input
                     class="CL-input"
                     :style="{
-                      width: `${getEleWidth(item)}`,
+                      width: `100%`,
                       'font-family': item.PASSWORDTYPE ? 'text-security-disc' : 'inherit'
                     }"
                     v-model="item.CL"
                     :class="{ 'psw-icon': item.comAttr == 'PASSWORD' }"
                     allowClear
-                    :placeholder="item.placeholder"
+                    :placeholder="item.placeholder || `请输入${item.alias || item.title}`"
                   >
                     <template slot="suffix" v-if="item.comAttr == 'PASSWORD'">
                       <svg-icon
@@ -194,12 +196,12 @@
                 <template v-if="showPercent(item)">
                   <a-input-number
                     class="EQ-input"
-                    :style="`width: ${getEleWidth(item)}`"
+                    :style="`width: 100%`"
                     v-model="item.EQ"
                     :min="0"
                     :max="100"
                     allowClear
-                    :placeholder="item.placeholder"
+                    :placeholder="item.placeholder|| `请输入${item.alias || item.title}`"
                   />
                 </template>
                 <template v-else>
@@ -207,11 +209,11 @@
                     :class="{ 'psw-icon': item.comAttr == 'PASSWORD' }"
                     class="EQ-input"
                     :style="{
-                      width: `${getEleWidth(item)}`,
+                      width: `100%`,
                       'font-family': item.PASSWORDTYPE ? 'text-security-disc' : 'inherit'
                     }"
                     v-model="item.EQ"
-                    :placeholder="item.placeholder || item.isPreciseSearch || item.fieldType == 'JSONB' ? '' : getI18nText('1.9.6', '区间搜素用~分割')"
+                    :placeholder="item.placeholder || `请输入${item.alias || item.title}`"
                     allowClear
                   >
                     <template slot="suffix" v-if="item.comAttr == 'PASSWORD'">
@@ -294,11 +296,13 @@
                         style="width: 60px; margin-right: 10px"
                         v-model="item.BIRTHDAY.start_val"
                         allowClear
+                        :placeholder="`开始${item.alias || item.title}`"
                       />
                       <a-input
                         style="width: 60px; margin-right: 10px"
                         v-model="item.BIRTHDAY.end_val"
                         allowClear
+                        :placeholder="`截止${item.alias || item.title}`"
                       />
                       <a-select
                         v-model="item.BIRTHDAY.unit"
@@ -306,6 +310,7 @@
                         showSearch
                         :filterOption="filterOption"
                         allowClear
+                        :placeholder="`请选择${item.alias || item.title}`"
                       >
                         <a-select-option
                           v-for="v in item.BIRTHDAY.units"
@@ -322,27 +327,6 @@
                   }}</span>
                 </a-radio-group>
               </div>
-              <!-- <a-select
-                v-if="item.con == 'QUOTE'"
-                v-model="item.QUOTE"
-                mode="multiple"
-                :placeholder="$t('1.1.6.7')"
-                :tokenSeparators="['|#|']"
-                style="width: 200px"
-                :filter-option="false"
-                @dropdownVisibleChange="dropdownVisibleChange($event, item)"
-                @search="handleSearch($event, item)"
-                showSearch
-                allowClear
-              >
-                <a-select-option
-                  v-for="sea in item.dataSource"
-                  :key="item.sid + sea.myName"
-                  :value="sea.myName"
-                >
-                  {{ sea.showKeys || sea.myName }}
-                </a-select-option>
-              </a-select> -->
               <template  v-if="item.con == 'QUOTE' || item.com == 'SelectMui'">
                 <c-tree-select
                   v-if="item.comType === 'treeSelect'"
@@ -361,13 +345,13 @@
                   :fetchingWordbook="fetchingWordbook"
                 ></multiSelect>
               </template>
-
-              <a-checkbox-group
-                class="check-box"
+              <CheckboxGroup
                 v-else-if="item.con == 'CONVERT'"
-                :options="item.setting&&item.setting.showSetting"
+                class="check-box"
                 v-model="item.CONVERT"
-              />
+                :options="item.setting && item.setting.showSetting || []"
+                :multiple="String(item.advanceOptionSetting) != '0'"
+              ></CheckboxGroup>
             </slot>
           </div>
         </div>
@@ -394,7 +378,12 @@
                 class="quick-item-title"
                 :class="{ 'quick-item-title-default': source !== 'editTable' }"
               >
-                <span>{{ handleName(item, "title") }}&nbsp;&nbsp;</span>
+                <!-- <span>{{ handleName(item, "title") }}&nbsp;&nbsp;</span> -->
+                <text-over-tooltip
+                  :refName="`quick-search-title-${item.columnName}`"
+                  class="quick-search-title-tool-tip"
+                  :content="item.alias || item.title"
+                ></text-over-tooltip>
               </div>
               <div
                 class="quick-item-col"
@@ -424,11 +413,11 @@
                       </div>
                     </div>
                   </slot>
-                  <a-input v-else style="width: 200px" v-model="item.inputVal"> </a-input>
+                  <a-input v-else style="width: 100%" v-model="item.inputVal" :placeholder="item.placeholder || `请输入${item.alias || item.title}`"> </a-input>
                 </div>
 
                 <!-- EVALUATE -->
-                <div v-else-if="item.EVALUATEAttr">
+                <div v-else-if="item.EVALUATEAttr" class="evaluate-attr-container">
                   <template v-for="tag in EVALUATEList">
                     <a-checkable-tag
                       :key="tag.value"
@@ -443,7 +432,7 @@
                 <!-- EVALUATE -->
 
                 <!-- NUMBERFiled -->
-                <div v-else-if="item.NUMBERFiled" class="ant-calendar-picker" style="width: 300px">
+                <div v-else-if="item.NUMBERFiled" class="ant-calendar-picker" style="width: 100%">
                   <span
                     class="ant-calendar-picker-input ant-input num-picker"
                     :class="{ 'num-picker-unit': item.inputUnit }"
@@ -494,15 +483,16 @@
                     <template v-if="showPercent(item)">
                       <a-input-number
                         class="CL-input"
-                        :style="`width: ${getEleWidth(item)}`"
+                        :style="`width: 100%`"
                         v-model="item.CL"
                         :min="0"
                         :max="100"
                         allowClear
+                        :placeholder="item.placeholder || `请输入${item.alias || item.title}`"
                       />
                     </template>
                     <template v-else>
-                      <a-input class="CL-input" :style="`width: ${getEleWidth(item)}`" v-model="item.CL" allowClear>
+                      <a-input class="CL-input" :style="`width: 100%`" v-model="item.CL" allowClear :placeholder="item.placeholder || `请输入${item.alias || item.title}`">
                       </a-input>
                     </template>
                   </template>
@@ -510,19 +500,20 @@
                     <template v-if="showPercent(item)">
                       <a-input-number
                         class="EQ-input"
-                        :style="`width: ${getEleWidth(item)}`"
+                        :style="`width: 100%`"
                         v-model="item.EQ"
                         :min="0"
                         :max="100"
                         allowClear
+                        :placeholder="item.placeholder|| `请输入${item.alias || item.title}`"
                       />
                     </template>
                     <template v-else>
                       <a-input
                         class="EQ-input"
-                        :style="`width: ${getEleWidth(item)}`"
+                        :style="`width: 100%`"
                         v-model="item.EQ"
-                        :placeholder="item.placeholder || item.isPreciseSearch || item.fieldType == 'JSONB' ? '' : getI18nText('1.9.6', '区间搜素用~分割')"
+                        :placeholder="item.placeholder || `请输入${item.alias || item.title}`"
                         allowClear
                       >
                       </a-input>
@@ -533,7 +524,7 @@
                   <div v-if="item.con == 'DATE'">
                     <a-radio-group v-model="item.DATE.con" buttonStyle="solid">
                       <a-radio-button
-                        v-for="date in dateTeam"
+                        v-for="date in useDateTeam"
                         v-show="!item.showDate"
                         @click="clickRadioGroup(item.DATE, date.con)"
                         :key="date.con"
@@ -548,9 +539,9 @@
                           format="YYYY-MM-DD HH:mm:ss"
                           v-model="item.DATE.start_val"
                           :show-time="{
-                            format: 'HH:mm:ss'
+                            defaultValue: $moment('00:00:00', 'HH:mm:ss')
                           }"
-                          :placeholder="'起始日期'"
+                          :placeholder="getI18nText('1.1.4.53', '开始时间')"
                           style="width: 120px"
                           allowClear
                         />
@@ -558,9 +549,9 @@
                         <a-date-picker
                           format="YYYY-MM-DD HH:mm:ss"
                           v-model="item.DATE.end_val"
-                          :placeholder="'截止日期'"
+                          :placeholder="getI18nText('1.9.147', '结束时间')"
                           :show-time="{
-                             format: 'HH:mm:ss'
+                            defaultValue: $moment('23:59:59', 'HH:mm:ss')
                           }"
                           style="width: 120px"
                           allowClear
@@ -568,27 +559,6 @@
                       </div>
                     </a-radio-group>
                   </div>
-                  <!-- <a-select
-                    v-if="item.con == 'QUOTE'"
-                    v-model="item.QUOTE"
-                    mode="multiple"
-                    :placeholder="$t('1.1.6.7')"
-                    :tokenSeparators="['|#|']"
-                    style="width: 200px"
-                    :filter-option="false"
-                    @dropdownVisibleChange="dropdownVisibleChange($event, item)"
-                    @search="handleSearch($event, item)"
-                    showSearch
-                    allowClear
-                  >
-                    <a-select-option
-                      v-for="sea in item.dataSource"
-                      :key="item.sid + sea.myName"
-                      :value="sea.myName"
-                    >
-                      {{ sea.myName }}
-                    </a-select-option>
-                  </a-select> -->
                   <template  v-if="item.con == 'QUOTE' || item.com == 'SelectMui'">
                     <c-tree-select
                       v-if="item.comType === 'treeSelect'"
@@ -607,13 +577,13 @@
                       :fetchingWordbook="fetchingWordbook"
                     ></multiSelect>
                   </template>
-
-                  <a-checkbox-group
-                    class="check-box"
+                  <CheckboxGroup
                     v-else-if="item.con == 'CONVERT'"
-                    :options="item.setting&&item.setting.showSetting"
+                    class="check-box"
                     v-model="item.CONVERT"
-                  />
+                    :options="item.setting && item.setting.showSetting || []"
+                    :multiple="String(item.advanceOptionSetting) != '0'"
+                  ></CheckboxGroup>
                 </slot>
               </div>
             </div>
@@ -748,6 +718,9 @@ import utils from '@/utils/utils-map';
 import {dataOptions} from '../const/dataOptions'
 
 import RenderWidget from '../components/render-widget/index.vue';
+import TextOverTooltip from "../components/TextOverTooltip";
+import CheckboxGroup from '../components/checkbox-group/CheckboxGroup.vue'
+import svgIcon from '@/component/svg/index.vue';
 
 export default create({
   name: "quick-search",
@@ -769,7 +742,8 @@ export default create({
     isOrgAdmin: Boolean,
     lastQuickSearchData: Array,
     show: Boolean,
-    getFilterData: Function
+    getFilterData: Function,
+    libSource: String
   },
   components: {
     RenderWidget,
@@ -803,7 +777,10 @@ export default create({
     [Form.Item.name]: Form.Item,
     [Tag.CheckableTag.name]: Tag.CheckableTag,
     multiSelect,
-    cTreeSelect
+    cTreeSelect,
+    TextOverTooltip,
+    CheckboxGroup,
+    svgIcon
   },
   computed: {
     showPercent() {
@@ -813,7 +790,7 @@ export default create({
     },
     getEleWidth(){
       return function(item) {
-        return `${item.advanceColWidth||200}px`
+        return `${item.advanceColWidth || 200}px`
       }
     },
     hasRelationQuickSearch() {
@@ -831,6 +808,16 @@ export default create({
 
     $moment() {
       return moment;
+    },
+    useDateTeam() {
+      if(this.libSource !== 'crm') return this.dateTeam0;
+      return this.dateTeam0.map(v => {
+        let obj = {...v}
+        if(obj.con.includes('LAST_')) {
+          obj.con = obj.con.replace(/LAST_/g, 'UP_')
+        }
+        return obj
+      })
     }
   },
   data() {
@@ -844,23 +831,6 @@ export default create({
       searchItem: {},
       curWordbookData: undefined,
       curAutograph: "",
-      dateTeam: [
-        { con: 'TODAY', title: '1.1.4.37', name: '今天' },
-        { con: 'TOMORROW', title: '1.1.4.38', name: '明天' },
-        { con: 'YESTERDAY', title: '1.1.4.39', name: '昨天' },
-        { con: 'THIS_WEEK', title: '1.1.4.40', name: '本周' },
-        { con: 'NEXT_WEEK', title: '1.1.4.41', name: '下周' },
-        { con: 'LAST_WEEK', title: '1.1.4.42', name: '上周' },
-        { con: 'THIS_MONTH', title: '1.1.4.43', name: '本月' },
-        { con: 'NEXT_MONTH', title: '1.1.4.44', name: '下月' },
-        { con: 'LAST_MONTH', title: '1.1.4.45', name: '上月' },
-        { con: 'THIS_SEASON', title: '1.1.4.46', name: '本季度' },
-        { con: 'NEXT_SEASON', title: '1.1.4.47', name: '下季度' },
-        { con: 'LAST_SEASON', title: '1.1.4.48', name: '上季度' },
-        { con: 'THIS_YEAR', title: '1.1.4.49', name: '本年' },
-        { con: 'NEXT_YEAR', title: '1.1.4.50', name: '下年' },
-        { con: 'LAST_YEAR', title: '1.1.4.51', name: '上年' }
-      ],
       birthdayTeam: [],
       limit_date: "",
       birthdayUnits: [
@@ -937,6 +907,9 @@ export default create({
   },
   created() {},
   methods: {
+    quickClassName(item) {
+      return item.con == 'DATE' || item.con == 'BIRTHDAY' || (item.con == 'CONVERT' && item.com !== 'SelectMui') || item.LABELAttr || item._isBlock || item.AGEAttr
+    },
     filterOption(...arg) {
       return utils.filterOption(...arg);
     },
@@ -946,11 +919,22 @@ export default create({
     init() {
       this.quickSearch = [];
       this.relationQuickSearch = [];
-      this.birthdayTeam = this.dateTeam.filter(
-        item => item.con != "THIS_YEAR" && item.con != "NEXT_YEAR" && item.con != "LAST_YEAR"
+      this.birthdayTeam = this.useDateTeam.filter(
+        item => {
+          if(this.libSource !== 'crm') return item.con != "THIS_YEAR" && item.con != "NEXT_YEAR" && item.con != "LAST_YEAR"
+          item.con != "THIS_YEAR" && item.con != "NEXT_YEAR" && item.con != "UP_YEAR"
+        }
       );
       let copyList = cloneDeep(this.searchFieldList);
-      let mySearchFieldList = copyList.filter(i => i.isShowSearch == 1 && i.filterExplicit != 1) || [];
+      let mySearchFieldList = copyList.filter(i =>  {
+        let { isRender, rangeFilter, widgetType } = i.widgetCfg || {};
+        // 快速搜索中组件不同
+        if (isRender && rangeFilter && ['DATETIME_RANGE', 'DATE_RANGE'].includes(widgetType)) {
+          i.widgetType = 'DATE_RANGE_QUICK';
+          i.widgetCfg.widgetType = 'DATE_RANGE_QUICK';
+        }
+        return i.isShowSearch == 1 && i.filterExplicit != 1
+      }) || [];
       // let relationTableList = JSON.parse(JSON.stringify(this.relationTableList));
       let relationTableList = cloneDeep(this.relationTableList);
 
@@ -1007,7 +991,9 @@ export default create({
           let advanceOptionSetting = item?.advanceOptionSetting;
            //  单选
            let optionSetting0 =String(advanceOptionSetting) == '0';
-           if(optionSetting0){
+           let settingLen = item.setting?.showSetting?.length;
+           let isCheck = optionSetting0 && settingLen && settingLen < 10;
+           if(optionSetting0 && !isCheck){
             this.$set(this.quickSearch[index], "value", undefined);
            } else {
             if (item.CONVERT && Array.isArray(item.CONVERT)) {
@@ -1110,7 +1096,8 @@ export default create({
             /**
              * 映射方式的单选模式
              */
-            if(optionSetting0){
+            let isCheck = optionSetting0 && showSetting.length && showSetting.length < 10 
+            if(optionSetting0 && !isCheck){
               this.$set(el, "com", "SelectMui");
               this.$set(el, "comType", "SelectMui");
               const labelList = el.setting.showSetting.map(i => {
@@ -1121,7 +1108,8 @@ export default create({
             }
 
             this.$set(el.setting, "showSetting", showSetting);
-            this.$set(el, "CONVERT",optionSetting0? "": []);
+            let convertDef = optionSetting0 ? isCheck ? [] : "" : [];
+            this.$set(el, "CONVERT", convertDef);
             return;
           }
         }
@@ -1144,6 +1132,7 @@ export default create({
           this.$set(el, "format", format);
           this.$set(el, "AGEAttr", true);
         } else if (el.setting?.attr === "PASSWORD") {
+          this.$set(el, "con", "CL");
           this.$set(el, "comAttr", "PASSWORD");
           this.$set(el, "PASSWORDTYPE", true);
         } else if (el.fieldType == "NUMBER") {
@@ -1178,6 +1167,7 @@ export default create({
               end_val: hasValue ? value[1] : null
             });
             let dateTeam = optionSetting1 ? [] : this[`dateTeam${advanceOptionSetting}`] || this.dateTeam0;
+            dateTeam = this.handleDateTeam(dateTeam);
             this.$set(el, 'dateTeam' , dateTeam)
           }
         } else if (el.fieldType == "TEXT") {
@@ -1196,6 +1186,17 @@ export default create({
         }
       });
     },
+    // 兼容二次开发平台数据
+    handleDateTeam(dateTeam){
+      if(this.libSource !== 'crm') return dateTeam;
+      return dateTeam.map(v => {
+        let obj = {...v}
+        if(obj.con.includes('LAST_')) {
+          obj.con = obj.con.replace(/LAST_/g, 'UP_')
+        }
+        return obj
+      })
+    },
     // 字典推荐值 item处理
     handleDictionDef(el) {
       let { defaultValue, defaultValueTitle } = el?.dictionarieObj || {};
@@ -1433,12 +1434,17 @@ export default create({
             }
           }
         } else if (vexutils.anyNotEmpty(item.CONVERT) && Array.isArray(item.CONVERT)) {
-          value = item.CONVERT.map(item => {
+          let optionSetting0  =String(advanceOptionSetting) === '0';
+          let tempConvert = item.CONVERT.map(item => {
             if (item && vexutils.isJSON(item)) {
               return JSON.parse(item);
             }
             return item;
           });
+          value = tempConvert
+          if (optionSetting0) {
+            value = tempConvert[0]
+          }
         } else if (item.DATE && !item.AGEAttr) {
           // 年龄组件的不按照 date 类型处理
           if (item.DATE.start_val || item.DATE.end_val) {
@@ -1534,7 +1540,7 @@ export default create({
         };
         conObj.push(temp);
       }
-      let dateCons = this.dateTeam.map(item => item.con);
+      let dateCons = this.useDateTeam.map(item => item.con);
       let res = conObj.filter(
         item =>
           item.value ||
@@ -1952,14 +1958,24 @@ export default create({
         box-sizing: border-box;
       }
       .quick-item-title {
-        min-width: 80px;
+        min-width: 134px;
+        width: 134px;
         line-height: 32px;
         text-align: right;
-        padding-left: 12px;
+        padding-left: 4px;
+        padding-right: 4px;
         color: #000;
+        box-sizing: border-box;
       }
       .quick-item-col {
-        padding: 0 12px;
+        width: calc(100% - 134px);
+        padding: 0 4px;
+        .ant-tag {
+          margin-right: 4px;
+        }
+        .ant-tag:last-child {
+          margin-right: 0;
+        }
       }
       .quick-item-title-default {
         width: 25%;
@@ -1979,10 +1995,10 @@ export default create({
       background-color: #ddd;
       cursor: pointer;
       &.ml {
-        margin-left: 20px;
+        margin-left: 12px;
       }
       &.mr {
-        margin-right: 20px;
+        margin-right: 12px;
       }
     }
     .check-date {
@@ -2040,8 +2056,8 @@ export default create({
   }
   .ant-radio-button-wrapper {
     padding: 0 8px;
-    height: 30px;
-    line-height: 30px;
+    height: 32px;
+    line-height: 32px;
     margin-top: 5px;
   }
 
@@ -2083,6 +2099,9 @@ export default create({
       }
     }
   }
+  .evaluate-attr-container {
+    line-height: 32px;
+  }
   &.quick-search-table {
     .module-title {
       color: #506493;
@@ -2092,9 +2111,12 @@ export default create({
     }
     .quick-item {
       display: inline-block;
+      width: 20%;
       &.quick-block {
         display: block;
+        width: 100%;
       }
+
     }
   }
 
@@ -2122,8 +2144,9 @@ export default create({
     font-family: "Avenir", Helvetica, Arial, sans-serif;
   }
 }
-// .age-container {
-// }
+.age-container {
+  width: 100%;
+}
 </style>
 <style lang="less">
 .quickSearch-saveToClass-modal {