meixioacomponent 0.4.2 → 0.4.6

package/packages/components/proForm/proFormWrap/pro_form_wrap.vue

@@ -23,35 +23,42 @@
           :rules="rules"
           :footer="false"
           v-model="formList"
+          :formType="formType"
           :disabled="disabled"
           :rowNumber="rowNumber"
+          :disables="disables"
           :labelWidth="labelWidth"
+          :labelPosition="labelPosition"
+          :formConfig="formConfig"
+          :isDialogForm="true"
           @formItemConfirm="formItemConfirm"
+          @onDragEnd="onDragEnd(formConfig)"
+          @disableWatcherResult="disableWatcherResult"
         >
           <template v-for="slotItem in slotList">
             <template :slot="`form-${slotItem}`">
               <slot :scope="formList" :name="`formslot-${slotItem}`"></slot>
             </template>
           </template>
-        </pro_formVue> </template
-    ></baseSectionVue>
+        </pro_formVue>
+      </template>
+    </baseSectionVue>
   </div>
 </template>
 
 <script>
-import pro_formVue from "../proForm/pro_form.vue";
-import baseSectionVue from "../../base/baseSection/baseSection.vue";
+import pro_formVue from '../proForm/pro_form.vue'
+import baseSectionVue from '../../base/baseSection/baseSection.vue'
 export default {
-  name: "baseFormWrap",
+  name: 'baseFormWrap',
   data() {
     return {
       slotList: [],
       sectionOpen: true,
-    };
+    }
   },
   created() {
-    this.createSlots();
-    console.log(this.slotList);
+    this.createSlots()
   },
   props: {
     disabled: {
@@ -66,10 +73,13 @@ export default {
       type: String,
       require: true,
     },
-
+    labelPosition: {
+      type: String,
+      default: `right`,
+    },
     labelWidth: {
       type: String,
-      default: "100px",
+      default: '100px',
     },
 
     formList: {
@@ -85,15 +95,23 @@ export default {
     },
     size: {
       type: String,
-      default: "small",
+      default: 'small',
+    },
+    formType: {
+      type: String,
+      default: 'default',
+    },
+    disables: {
+      type: Object,
     },
+    formConfig: {},
   },
   computed: {
     iconClass() {
       if (this.sectionOpen) {
-        return "meixicomponenticon-shouqi";
+        return 'meixicomponenticon-shouqi'
       }
-      return "meixicomponenticon-xiala";
+      return 'meixicomponenticon-xiala'
     },
   },
   components: {
@@ -102,38 +120,62 @@ export default {
   },
   methods: {
     createSlots() {
-      let slotList = this.slotList;
-      let formList = this.$props.formList;
+      this.slotList = []
+      let slotList = this.slotList
+      let formList = this.$props.formList
       for (let i = 0; i < formList.length; i++) {
-        let citem = formList[i];
-        if (citem.type == "template") {
-          slotList.push(citem.key);
+        let citem = formList[i]
+        if (citem.type == 'template') {
+          slotList.push(citem.key)
         }
       }
     },
 
+    disableWatcherResult(params) {
+      this.$nextTick(() => {
+        const { result, type, key } = params
+        const { formList } = this.$props
+        let index = formList.findIndex((citem) => {
+          return citem.key == key
+        })
+        const formItem = formList[index]
+        if (type == 'hide') {
+          this.$set(formItem, 'renderHide', result)
+        } else if (type == 'disable') {
+          this.$set(formItem, 'disabled', result)
+        } else if (type == 'template') {
+          formItem.type = result
+          this.createSlots()
+        }
+      })
+    },
+
     async checkValidate() {
-      let refs = this.$refs.proForm;
-      let validateResult = true;
-      let validate = await refs.checkValidate();
-      validateResult = validate.result;
+      let refs = this.$refs.proForm
+      let validateResult = true
+      let validate = await refs.checkValidate()
+      validateResult = validate.result
       if (!validateResult) {
-        return validateResult;
+        return validateResult
       }
-      return validateResult;
+      return validateResult
     },
     handleSection() {
-      this.sectionOpen = !this.sectionOpen;
+      this.sectionOpen = !this.sectionOpen
     },
     formItemConfirm(configItem) {
-      this.$emit("formItemConfirm", configItem);
+      this.$emit('formItemConfirm', configItem)
     },
 
     getFormValue() {
-      return this.$refs.proForm.returnFormValue();
+      return this.$refs.proForm.returnFormValue()
+    },
+
+    onDragEnd(value) {
+      this.$emit('onDragEnd', value)
     },
   },
-};
+}
 </script>
 
 <style lang="less" scoped>

package/packages/components/proPageTable/oa_pro_colum_config.vue

@@ -27,34 +27,27 @@
         <!-- 可以拖拽的列表 -->
 
         <div class="drag">
-          <draggable
-            element="div"
-            v-model="dragConfigList"
-            animation="500"
-            @start="onStart"
-            @end="onEnd"
+          <div
+            :key="index"
+            class="config-item-wrap"
+            v-for="(item, index) in dragConfigList"
+            v-dragging="{ item: item, list: dragConfigList }"
           >
-            <div
-              class="config-item-wrap"
-              :key="index"
-              v-for="(item, index) in dragConfigList"
-            >
-              <div class="item-left" @click.self="showTableColum(item)">
-                <el-checkbox
-                  v-model="item.show"
-                  :disabled="item.lock"
-                ></el-checkbox>
-                <span class="item-text">{{ item.label }}</span>
-              </div>
-              <div class="item-right">
-                <base-icon
-                  :name="`meixicomponenticon-tuozhuai`"
-                  :size="`s`"
-                  :color="`m`"
-                ></base-icon>
-              </div>
+            <div class="item-left" @click.self="showTableColum(item)">
+              <el-checkbox
+                v-model="item.show"
+                :disabled="item.lock"
+              ></el-checkbox>
+              <span class="item-text">{{ item.label }}</span>
+            </div>
+            <div class="item-right">
+              <base-icon
+                :name="`meixicomponenticon-tuozhuai`"
+                :size="`s`"
+                :color="`m`"
+              ></base-icon>
             </div>
-          </draggable>
+          </div>
         </div>
       </div>
       <baseButtonHandle
@@ -68,7 +61,6 @@
 </template>
 
 <script>
-import draggable from 'vuedraggable'
 import baseButtonHandle from '../base/baseButtonHandle/baseButtonHandle.vue'
 export default {
   data() {
@@ -99,8 +91,12 @@ export default {
       },
     ]
   },
+  mounted() {
+    this.$dragging.$on('dragged', ({ value }) => {
+      this.onEnd()
+    })
+  },
   components: {
-    draggable,
     baseButtonHandle,
   },
   props: {

package/packages/components/proPageTable/oa_pro_footer.vue

@@ -2,9 +2,11 @@
   <div class="oa-pro-footer-content">
     <div class="footer-left">
       <div class="total-item" :key="index" v-for="(item, index) in totalList">
-        <span class="item-name">{{ item.label }} : </span>
+        <span class="item-name">{{ item.label }} :</span>
         <span class="item-number">{{ item.total }}</span>
       </div>
+
+      <slot name="footer-slot"></slot>
     </div>
     <div class="footer-right">
       <basePopoverButton
@@ -29,13 +31,13 @@
 </template>
 
 <script>
-import basePopoverButton from "../base/basePopoverButton/index.vue";
-import oa_pro_handle_table_borderVue from "./oa_pro_handle_table_border.vue";
+import basePopoverButton from '../base/basePopoverButton/index.vue'
+import oa_pro_handle_table_borderVue from './oa_pro_handle_table_border.vue'
 export default {
   data() {
     return {
       popoverFlag: false,
-    };
+    }
   },
   props: {
     totalList: {
@@ -54,15 +56,15 @@ export default {
   },
   methods: {
     sizeChange(e) {
-      this.$emit("pageSizeChange");
-      this.$parent.refreshData();
+      this.$emit('pageSizeChange')
+      this.$parent.refreshData()
     },
     currentChange() {
-      this.$emit("pageCurrentChange");
-      this.$parent.refreshData(false);
+      this.$emit('pageCurrentChange')
+      this.$parent.refreshData(false)
     },
   },
-};
+}
 </script>
 
 <style lang="less" scoped>
@@ -101,7 +103,7 @@ export default {
     .total-item + .total-item {
       margin-left: var(--margin-5);
       &::before {
-        content: "/";
+        content: '/';
         color: var(--font-color-d);
         margin-right: var(--margin-5);
         font-size: var(--font-size-base);

package/packages/components/proPageTable/oa_pro_screen.vue

@@ -42,6 +42,7 @@ export default {
       if (this.$props.proScreenList.length == 0) {
         this.insertDefaultItem();
       }
+  
     },
     insertDefaultItem() {
       this.$emit("insertDefaultItem");

package/packages/components/proPageTable/oa_pro_screen_item.vue

@@ -9,14 +9,14 @@
       <el-select
         size="small"
         class="item"
-        v-model="item.type"
         :disabled="disable"
+        v-model="item.key"
         placeholder="请选择要筛选的字段名"
       >
         <el-option
           v-for="(item, index) in config"
           :key="item.label"
-          :value="item.type"
+          :value="item.key"
           :label="item.label"
           :disabled="item.isCheck"
         >
@@ -90,9 +90,7 @@ export default {
   created() {
     this.privateConfigIndex = this.$props.configIndex
   },
-  mounted() {
-    console.log(this.config)
-  },
+  mounted() {},
   props: {
     item: {},
     config: {},
@@ -112,7 +110,9 @@ export default {
     typeChange(index) {
       if (this.$props.config[index].isCheck == true) return
       this.privateConfigIndex = index
-      this.$props.item.key = this.$props.config[this.privateConfigIndex].key
+      const configItem = this.$props.config[this.privateConfigIndex]
+      this.$props.item.key = configItem.key
+      this.$props.item.type = configItem.type
       this.trigerCheck(this.privateConfigIndex, true)
     },
 

package/packages/components/proPageTable/oa_pro_table.vue

@@ -23,7 +23,7 @@
     <div class="oa-pro-table-search">
       <oa_pro_table_searchVue
         v-model="module"
-        v-show="!isCheckTableRow"
+        v-show="!isCheckTableRow || !isHasHandlePlugin"
         ref="oaProTableSearch"
         :screenList="screenList"
         :placeholder="placeholder"
@@ -39,7 +39,7 @@
       <oa_pro_table_check_handle_barVue
         :del-fn="delFn"
         :export-fn="exportFn"
-        v-if="isCheckTableRow"
+        v-if="isCheckTableRow && isHasHandlePlugin"
         :checked-value="tableCheckboxConfig.value"
       >
         <template slot="check-handle">
@@ -140,32 +140,26 @@
               effect="dark"
               placement="top"
               :content="scope.row[`${item.key}`]"
-              v-else-if="isToolTip(scope.row[`${item.key}`])"
+              v-else-if="
+                isToolTip(scope.row[`${item.key}`]) && item.type != 'time'
+              "
             >
               <span
                 class="cell-content-text"
-                :class="[
-                  item.fun ? 'fun' : '',
-                  item.click ? 'primary' : '',
-                  item.color ? item.color : '',
-                ]"
+                :class="nomalStyle(item)"
                 @click="rowClick(item, scope.row)"
               >
-                {{ scope.row[`${item.key}`] }}
+                {{ nomalRowValue(scope.row, item) }}
               </span>
             </el-tooltip>
 
             <span
               v-else
               class="cell-content-text"
-              :class="[
-                item.fun ? 'fun' : '',
-                item.click ? 'primary' : '',
-                item.color ? item.color : '',
-              ]"
+              :class="nomalStyle(item)"
               @click="rowClick(item, scope.row)"
             >
-              {{ scope.row[`${item.key}`] }}
+              {{ nomalRowValue(scope.row, item) }}
             </span>
           </template>
         </el-table-column>
@@ -181,7 +175,11 @@
         :pageProps="pageProps"
         :totalList="totalList"
         :pageConfig="pageConfig"
-      ></oa_pro_footerVue>
+      >
+        <template slot="footer-slot">
+          <slot name="footer-pre-slot"></slot>
+        </template>
+      </oa_pro_footerVue>
     </div>
 
     <!-- 高级筛选的弹框 -->
@@ -229,9 +227,11 @@ import oa_pro_table_skeletonVue from './oa_pro_table_skeleton.vue' //表格骨
 import baseDefaultSvgVue from '../base/baseDefaultSvg/baseDefaultSvg.vue' //缺省页组件
 import baseButtonHandle from '../base/baseButtonHandle/baseButtonHandle.vue' //通用组件 排列尾部按钮的组件
 import oa_pro_table_check_handle_barVue from './oa_pro_table_check_handle_bar.vue' //  当表格有行被选中的时候
+//
 
 //
 import componentConfig from '../../config/componentConfig'
+import { FilterTime } from '../../utils/utils'
 let canPush = true
 export default {
   name: 'baseProTable',
@@ -273,6 +273,7 @@ export default {
   },
   created() {
     this.init()
+
     componentConfig.eventBus.$on('handleTableBorder', this.handleTableBorder)
   },
   mounted() {
@@ -458,11 +459,16 @@ export default {
 
     // 行被选中删除的方法
     delFn() {
-      return this._linkViewClassSubs.delFn || null
+      return this._linkViewClassSubs?.delFn || null
     },
     // 行被选中导出的方法
     exportFn() {
-      return this._linkViewClassSubs.exportFn || null
+      return this._linkViewClassSubs?.exportFn || null
+    },
+
+    // 是否存在delFn,exportFn以及check-handle-plugin slot
+    isHasHandlePlugin() {
+      return this.delFn || this.exportFn || this.$slots[`check-handle-plugin`]
     },
   },
   components: {
@@ -624,8 +630,6 @@ export default {
     },
 
     handleScreenItem(config) {
-      //console.log(config);
-
       let index = this.proScreenList.findIndex((item) => {
         return item.key == config.value
       })
@@ -637,6 +641,7 @@ export default {
 
         if (_configIndex >= 0) {
           let _configItem = this.$props.proScreenConfig[_configIndex]
+
           this.proScreenList.push({
             key: _configItem.key,
             value: '',
@@ -951,6 +956,25 @@ export default {
         this.cleanProscreenCondition(true)
       })
     },
+
+    // 返回普通格式的样式
+    nomalStyle(item) {
+      return [
+        item.fun ? 'fun' : '',
+        item.click ? 'primary' : '',
+        item.color ? item.color : '',
+      ]
+    },
+
+    // 返回普通格式的字段
+    nomalRowValue(row, item) {
+      const value = row[item.key]
+      if (item.type == 'time') {
+        return FilterTime(value, 'YYYY-MM-DD HH:mm:ss')
+      } else {
+        return value
+      }
+    },
   },
 }
 </script>