ylwl-cpscoms 1.1.0 → 1.2.0

package/src/SlPage/index.vue

@@ -1,303 +0,0 @@
-<template>
-  <main :style="{ padding: notShowPadding ? '' : '20px' }" class="main-box">
-    <div class="sl-form">
-      <transition-group name="fade" tag="span" >
-        <slForm key="slForm" ref="slForm" v-model="form" :data="filterForm" :showlabel="false" :form-props="{ inline: true, size: 'small', labelStyle: { textAlign: 'left' }, labelWidth: 'auto' }" />
-      </transition-group>
-      <div class="search-btn">
-        <el-button type="primary" size="small" icon="el-icon-search" @click="searchTableData">搜索</el-button>
-        <el-button size="small" icon="el-icon-search" @click="resetTableData">重置</el-button>
-        <el-button v-show="options.length > showFormItem " size="small" type="text" @click="isShowMoreFilter">{{ isFold ? '折叠' : '展开' }}<i :class="isFold ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" style="margin-left:3px"></i></el-button>
-      </div>
-    </div>
-    <div class="sl-table-header">
-      <div>
-        <slot :tablefilterFormData="$refs.slTable ? $refs.slTable.processedParams : {}" name="tableLeftButtons"></slot>
-      </div>
-      <div>
-        <slot :tablefilterFormData="$refs.slTable ? $refs.slTable.processedParams : {}" name="tableRightButtons" ></slot>
-        <el-button v-if="isShowColSetting" size="small" icon="el-icon-setting" @click="editCol">列设置</el-button>
-      </div>
-    </div>
-    <slTable ref="slTable" :table-api="tableApi" :columns="tableColumns" :project-from="projectFrom" :params="form" :filter-form="filterForm" :other-config="otherConfig" :default-seach-params="defaultSeachParams" v-bind="$attrs" v-on="$listeners" @setStorageCustomCol="setStorageCustomCol">
-      <template v-for="slotName in Object.keys($scopedSlots)" slot-scope="scope" :slot="slotName" >
-        <slot :name="slotName" v-bind="{ row: scope.row }"></slot>
-      </template>
-    </slTable>
-  </main>
-</template>
-<script>
-// import { mapGetters } from 'vuex'
-import slForm from '../SlForm/index.vue'
-import slTable from '../SlTable/index.vue'
-import { createCommandDrawer } from '@/components/global/SlDrawer'
-import colSetting from '@/components/global/SlTable/components/colSetting.vue'
-import { generateUniqueId, hasKey } from '@/components/global/utils'
-import store from '@/store'
-export default {
-  components: {
-    slForm,
-    slTable
-  },
-  props: {
-    tableApi: { type: Function, default: () => ({}) },
-    autoRequest: { type: Boolean, default: false },
-    tableColumns: { type: Array, default: () => [] },
-    filterForm: { type: Array, default: () => [] },
-    showFormItem: { type: Number, default: 3 },
-    projectFrom: { type: String, default: 'oldCpsb' },
-    initSeachParams: { type: Object, default: () => ({}) },
-    defaultSeachParams: { type: Object, default: () => ({}) },
-    isShowColSetting: { type: Boolean, default: true },
-    notShowPadding: { type: Boolean, default: false }, // 是否要padding效果
-    otherConfig: { type: Object, default: () => ({
-      rowKey: 'id',
-      responderCof: {},
-      requestBodyCof: {}
-    })
-    }
-  },
-  data() {
-    return {
-      options: this.filterForm,
-      form: {},
-      isFold: false,
-      headKey: '',
-      uniqueId: ''
-    }
-  },
-  computed: {
-    // ...mapGetters([
-    //   'currentColConfig'
-    // ]),
-    currentColConfig() {
-      // console.log(store.getters, "store.gettersxxxxxxx")
-      return store.state.tableConfig.colConfig[this.uniqueId] || {}
-    },
-    allColConfig() {
-      return store.state.tableConfig.colConfig
-    },
-    selectedList() {
-      return this.$refs.slTable ? this.$refs.slTable.selectedList : []
-    },
-    selectedListIds() {
-      return this.$refs.slTable ? this.$refs.slTable.selectedListIds : []
-    }
-
-  },
-  created() {
-    this.uniqueId = generateUniqueId(this.tableApi.toString())
-    // console.log(this.uniqueId, "this.uniqueIdthis.uniqueIdthis.uniqueIdthis.uniqueId", this.tableApi.toString())
-    store.dispatch('getStorageCustomCol', this.uniqueId)
-    this.options.forEach((option, index) => {
-      if (index > this.showFormItem - 1) {
-        option.show = false
-      }
-    })
-    this.tableColumns.forEach(item => {
-      if (!hasKey(item, 'isShow')) {
-        this.$set(item, 'isShow', true)
-      }
-      if (this.currentColConfig.hide && this.currentColConfig.hide.includes(item.prop)) {
-        this.$set(item, 'isShow', false)
-      }
-    })
-    // 表格排序
-    this.sortTalbeColumns()
-
-    if (this.initSeachParams && Object.keys(this.initSeachParams).length > 0) {
-      for (const key in this.initSeachParams) {
-        this.form[key] = this.initSeachParams[key]
-      }
-    }
-  },
-  async mounted() {
-    this.autoRequest && this.$refs.slTable.getTableData()
-    this.$refs.slTable.resetColumns(this.tableColumns.filter(item => item.isShow && this.isShowTableColumn(item)))
-  },
-  methods: {
-    hasKey,
-    generateUniqueId,
-    // 永久删除的
-    isShowTableColumn(item) {
-      if (hasKey(item, 'isAlwaysShow') && typeof item.isAlwaysShow === 'function') {
-        return item.isAlwaysShow({
-          item: item
-        })
-      } else if (hasKey(item, 'isAlwaysShow') && typeof item.isAlwaysShow === 'string') {
-        return item.isAlwaysShow
-      } else {
-        return true
-      }
-    },
-    sortTalbeColumns() {
-      // console.log(this.currentColConfig.sort && this.currentColConfig.sort.length > 0, '是否');
-      // console.log(store, 'store.getters', this.allColConfig);
-      if (this.currentColConfig.sort && this.currentColConfig.sort.length > 0) {
-        this.tableColumns.sort((a, b) => {
-          return this.currentColConfig.sort.indexOf(a.prop) - this.currentColConfig.sort.indexOf(b.prop)
-        })
-      }
-    },
-    searchTableData() {
-      console.log(this.form, this.$refs.slForm.$refs.form, this.$refs.slTable.processedParams)
-      this.$refs.slForm.$refs.form.validate((valid) => {
-        if (valid) {
-          this.$refs.slTable.handleCurrentChange(1)
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
-    },
-    resetTableData() {
-      this.$refs.slForm.$refs.form.resetFields()
-      for (const key in this.form) {
-        if (this.form.hasOwnProperty(key)) {
-          this.form[key] = ''
-        }
-      }
-      // console.log(this.form, "xxxxx");
-      this.$refs.slForm.$refs.form.validate((valid) => {
-        if (valid) {
-          this.$refs.slTable.handleCurrentChange(1)
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
-      // this.$refs.slTable.handleCurrentChange(1)
-    },
-    getTableData() {
-      this.$refs.slForm.$refs.form.validate((valid) => {
-        if (valid) {
-          this.$refs.slTable.getCurrentPageList()
-        } else {
-          console.log('error getCurrentPageList submit!!')
-          return false
-        }
-      })
-    },
-    isShowMoreFilter() {
-      this.isFold = !this.isFold
-      if (this.isFold) {
-        this.options.forEach(option => {
-          this.$set(option, 'show', true)
-        })
-      } else {
-        this.options.forEach((option, index) => {
-          if (index > this.showFormItem - 1) {
-            this.$set(option, 'show', false)
-          }
-        })
-      }
-      // this.$forceUpdate()
-    },
-    saveKeeyAlive() {
-      const hideColArray = this.tableColumns.reduce((acc, item) => {
-        if (!item.isShow) {
-          acc.push(item.prop)
-        }
-        return acc
-      }, [])
-      store.dispatch('saveStorageCustomCol', {
-        key: this.uniqueId,
-        type: 'hide',
-        value: hideColArray
-      })
-    },
-    editCol() {
-      console.log(this.tableColumns.filter(item => item.prop !== 'operate' || item.type !== 'selection' || item.isShow), 'this.tableColumns', this.tableColumns)
-      // console.log(this.tableColumns, "在这里点开");
-      this.sortTalbeColumns()
-      // console.log(this.tableColumns, "在这里点开2");
-      createCommandDrawer({
-        title: '列设置(可拖拽排序)',
-        size: '20%',
-        direction: 'rtl',
-        contentComponent: colSetting,
-        closeDrawer: () => {
-          this.saveKeeyAlive()
-          this.$refs.slTable.headKey = new Date().getTime() + ''
-          // this.$refs.slTable.resetColumns(this.tableColumns.filter(item => item.isShow))
-        },
-        contentProps: {
-          columns: this.tableColumns.filter(item => item.prop !== 'operate' && item.type !== 'selection' && this.isShowTableColumn(item))
-        }, // 如果需要传递 props 给内容组件，可以在这里定义
-        contentListeners: {
-          'update-columns': (columns) => {
-            // 处理列更新事件
-            // console.log('接收到更新的列数据:', columns, this.tableColumns)
-            // 如果有多选框和操作，要加上
-            const sortColumns = [...columns]
-            const findSelection = this.tableColumns.find(item => item.type === 'selection')
-            const findOperate = this.tableColumns.find(item => item.prop === 'operate')
-            if (findSelection) {
-              sortColumns.unshift(findSelection)
-            }
-            if (findOperate) {
-              sortColumns.push(findOperate)
-            }
-            // console.log(sortColumns, "sortColumns")
-            this.$refs.slTable.resetColumns(sortColumns.filter(item => item.isShow))
-            this.setStorageCustomCol(columns)
-          },
-          'change-columns': () => {
-            this.$refs.slTable.resetColumns(this.tableColumns.filter(item => item.isShow))
-            this.$refs.slTable.headKey = new Date().getTime() + ''
-          }
-        }
-      })
-    },
-    setStorageCustomCol(columns) {
-      // console.log(this.uniqueId, 'a ?');
-      store.dispatch('saveStorageCustomCol', {
-        key: this.uniqueId,
-        type: 'sort',
-        value: columns.map(item => item.prop)
-      })
-    }
-  }
-}
-</script>
-<style scoped >
-.main-box {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-}
-
-.sl-form {
-  flex: 1 0 1;
-  transition: all 0.3s ease-in-out;
-  /* display: flex; */
-  /* justify-content: space-between; */
-}
-
-.yl-form-box {
-  display: inline;
-}
-
-.search-btn {
-  float: right;
-  /* display: inline-block; */
-  margin-left: 20px;
-  /* margin-top: 5px; */
-}
-
-.fade-enter-active, .fade-leave-active {
-  transition: opacity 0.3s;
-}
-.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
-  opacity: 0;
-}
-
-.sl-table-header {
-  display: flex;
-  justify-content: space-between;
-  margin: 10px 0;
-}
-
-</style>
-

package/src/SlPage/remark.md

@@ -1,283 +0,0 @@
-<template>
-
-  <div class="slPage_main">
-    <SlMessage>
-      <template slot="operate">
-        <el-button>123</el-button>
-      </template>
-      <template slot="message">
-        <span>123</span><br>
-        <span>123</span><br>
-      </template>
-    </SlMessage>
-    <!-- project-from  艾瑞斯的数组入参不一致 
-    initSeachParams  初始化参数
-    -->
-    <SlPage
-      :table-api="rechargeApi.getRechargeList"
-      :auto-request="true"
-      :table-columns="columns"
-      :filter-form="filterForm"
-      :initSeachParams="initSeachParams"
-      :show-form-item="5"
-       :project-from="'ares'" 
-      :other-config= "{
-         rowKey: 'buserId',
-          responderCof: {
-            'total': ['data', 'page', 'total'],
-            'list': ['data', 'page', 'list'],
-            'statusCode': 'flag',
-          },
-          requestBodyCof: {
-            currentPage: 'pageNo',
-          },
-          responderCof: {
-            'total': ['data', 'count'],
-          },
-          donShowOverflowTooltip: true,
-      }"
-    >
-      <template slot="tableLeftButtons" slot-scope="{ tablefilterFormData }">
-        <el-button size="small" type="primary">新增</el-button>
-        <el-button size="small" type="success">导出</el-button>
-      </template>
-      <template slot="tableRightButtons" slot-scope="{ tablefilterFormData }">
-        <el-button size="small" type="primary">新增</el-button>
-        <el-button size="small" type="success">导出</el-button>
-      </template>
-    </SlPage>
-    <!-- <SlTable /> -->
-  </div>
-</template>
-
-<script>
-import SlPage from '@/components/global/SlPage'
-import SlTable from '@/components/global/SlTable'
-import SlForm from '@/components/global/SlForm'
-import * as rechargeApi from '@/api/propertyManagement/rechargeOrder'
-import SlMessage from '@/components/global/SlAlert'
-import { showConfirmMessageBox } from '@/components/global/SlMessageBox'
-import { createCommandDialog } from '@/components/global/SlDialog'
-import aa from './aa.vue'
-export default {
-  components: {
-    SlPage,
-    SlTable,
-    SlMessage,
-    SlForm
-  },
-  data() {
-    const tableData = [
-      { id: 10001, name: 'Test1', role: 'Develop', flag1: false, flag2: false },
-      { id: 10002, name: 'Test2', role: 'Test', flag1: true, flag2: true },
-      { id: 10003, name: 'Test3', role: 'PM', flag1: false, flag2: false }
-    ]
-    const columns = [
-      { prop: 'buserId', label: '日期', width: '180', sortable: true, isShow: false },
-      { prop: 'applyTime', label: '姓名', width: '180', isShow: false },
-      { prop: 'coinName', label: '姓名zzzzz', width: '180', isShow: false, tip: {
-        key: 'cuserAccount',
-        isShow: (row) => row.id === 513910
-
-      }},
-      { prop: 'depositOrderType', label: '姓名', width: '180', isShow: false,
-
-        // tip: {
-        //   // key: 'cuserAccount'
-        // }
-      },
-      { prop: 'completeTime', label: '姓名', width: '180', isShow: false },
-      { prop: 'coinType', label: '姓名', width: '180', isShow: false },
-      { prop: 'id', label: '姓名123', width: '180', isShow: false },
-      { prop: 'paymentType', label: '姓名423', width: '180', isShow: false },
-      { prop: 'paymentVoucher', label: '姓名77', width: '180', isShow: false },
-      { prop: 'rechargeRatio', label: '姓名', width: '180', isShow: false },
-      { prop: 'rechargeRealAmount', label: '姓名', width: '180', isShow: false },
-      { prop: 'rechargeStatusName', label: '姓名', width: '180', isShow: false },
-      { prop: 'rechargeStatus', label: '姓名', width: '180', isShow: false },
-      { prop: 'rechargeType', label: '姓名', width: '180', isShow: false },
-      { prop: 'reviewRemark', label: '姓名', width: '180', isShow: false },
-
-      { prop: 'rechargeNum', label: '地址', isShow: false },
-      { prop: 'operate', label: '操作', fixed: 'right', list: [
-        {
-          label: '编辑',
-          type: 'primary',
-          size: 'mini',
-           isShow: (row, column, $index) => {
-            console.log(row, column, $index, this, "000000")
-            return row.id === 513910
-          },
-          click: (row, column, $index, $event) => {
-            console.log(row, column, $index, $event, this, "000000")
-            this.$message.success('编辑')
-            showConfirmMessageBox({
-              message: '是否删除爱吧爱吧',
-              api: async(aaaa) => {
-                console.log("---------", aaaa)
-              },
-              params: {
-                bbbb: '人啊人啊'
-              }
-            })
-          }
-        },
-        {
-          label: '编辑2',
-          type: 'primary',
-          size: 'mini',
-          click: (row, column, $index, $event) => {
-            console.log(row, column, $index, $event, this, "000000")
-            this.$message.success('编辑')
-            createCommandDialog({
-              title: 'My Dialog',
-              width: '50%',
-              contentComponent: aa,
-              // footerSlot: 'footerSlot'
-              // contentProps: {
-              //   data: this.filterForms
-              // },
-              // footerSlot: aa
-            })
-          }
-        }
-      ] }
-    ]
-    const filterForm = [
-
-    // {
-    //   type: 'select',
-    //   model: 'publisherId',
-    //   label: '聚的话',
-    //   labelKey: 'label',
-    //   valueKey: 'value',
-    //   props: { placeholder: '请输入聚合', disabled: false },
-    //   rules: [{ required: true, message: '该项为必填', trigger: 'change' }],
-    //   options: [ { label: 'Android', value: 1 },
-    //     { label: 'iOS', value: 2 },
-    //     { label: 'H5', value: 3 }],
-    //   view: 'auto'
-    // },
-    // {
-    //   label: '聚戏ID',
-    //   type: 'input',
-    //   model: 'aggGameId',
-    //   privateAttrs: { placeholder: '请输入聚合游戏ID' },
-    //   rules: [{ required: true, message: '该项为必填', trigger: 'change' }],
-    //   view: 'auto'
-    // },
-    // {
-    //   type: 'select',
-    //   model: 'publisherId',
-    //   label: '哈苏话',
-    //   labelKey: 'label',
-    //   valueKey: 'value',
-    //   props: { placeholder: '请输入聚合', disabled: false },
-    //   rules: [{ required: true, message: '该项为必填', trigger: 'change' }],
-    //   options: [ { label: 'Android', value: 1 },
-    //     { label: 'iOS', value: 2 },
-    //     { label: 'H5', value: 3 }],
-    //   view: 'auto'
-    // },
-      {
-        label: '游戏ID',
-        type: 'input',
-        rules: [{ required: true, message: '该项为必填', trigger: 'change' }],
-        model: 'aggGxxzxcameId',
-        privateAttrs: { placeholder: '请输入聚合游戏ID' },
-        // rules: [{ required: true, message: '该项为必填', trigger: 'change' }],
-        view: 'auto'
-      },
-      {
-        type: 'select',
-        model: 'publisherId',
-        label: '聚c23213',
-        labelKey: 'label',
-        valueKey: 'value',
-        props: { placeholder: '请输入聚合', disabled: false },
-        // rules: [{ required: true, message: '该项为必填', trigger: 'change' }],
-        options: [ { label: 'Android', value: 1 },
-          { label: 'iOS', value: 2 },
-          { label: 'H5', value: 3 }],
-        view: 'auto'
-      },
-      {
-        label: '游戏ID',
-        type: 'input',
-        model: 'aggzxczzxcameId',
-        privateAttrs: { placeholder: '请输入聚合游戏ID' },
-        // rules: [{ required: true, message: '该项为必填', trigger: 'change' }],
-        view: 'auto'
-      },
-      {
-        label: '时间',
-        type: 'datePicker',
-        model: 'aggGamezxcId',
-        privateProps: { type: 'daterange', startPlaceholder: '我是开始时间' },
-        attrs: { placeholder: '请输入聚合游戏ID', type: 'daterange' },
-        view: 'auto'
-      },
-      {
-        type: 'select',
-        model: 'publisasaherId',
-        label: '桑的话',
-        labelKey: 'label',
-        valueKey: 'value',
-        props: { placeholder: '请输入聚合', disabled: false },
-        options: [ { label: 'Android', value: 1 },
-          { label: 'iOS', value: 2 },
-          { label: 'H5', value: 3 }],
-        view: 'auto'
-      },
-      {
-        label: '聚合游戏ID',
-        type: 'input',
-        model: 'aggGameId',
-        privateAttrs: { placeholder: '请输入聚合游戏ID' },
-        rules: [{ required: true, message: '该项为必填', trigger: 'change' }],
-        view: 'auto'
-      },
-    // {
-    //   label: 'swich',
-    //   type: 'switch', // 渲染为select
-    //   model: 'problemxxFileInfo', // 给form对象绑定followUserId字段
-    //   // rules: [{ required: true, message: '该项为必填', trigger: 'change' }], //规则
-    //   view: 'auto',
-    //   props: {
-    //     stip: '最多20张，每个大小不超过100M，支持 .png .jpg .jpeg .mp4',
-    //     limit: 20,
-    //     perSize: 100,
-    //     accept: '.png, .jpg, .jpeg, .mp4, .MP4',
-    //     max: 2000
-    //     // style: 'width:350px'
-    //   },
-    //   privateAttrs: {
-    //     style: 'width:350px'
-    //   },
-    //   remark: '备注'
-    //   // show: false
-    // }
-    // {
-    //   label: '多选框',
-    //   type: 'checkbox',
-    //   model: 'gameApk',
-    //   options: [
-    //     { label: 'Android', value: 1 },
-    //     { label: 'iOS', value: 2 },
-    //     { label: 'H5', value: 3 }
-    //   ],
-    //   rules: [{ required: true, message: '该项为必填', trigger: 'change' }],
-    //   view: 'auto',
-    // },
-
-    ]
-    return {
-      rechargeApi,
-      tableData,
-      filterForm,
-      columns
-    }
-  },
-
-}
-</script>