web-component-gallery 0.1.0

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "web-component-gallery",
+  "version": "0.1.0",
+  "description": "vue-library-ui组件库",
+  "main": "dist/index.umd.js",
+  "files": [
+    "dist",
+    "plugins"
+  ],
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "build:js": "webpack --config ./webpack.components.js",
+    "build:css": "npx gulp less",
+    "build:lib": "npm run build:js && npm run build:css"
+  },
+  "dependencies": {
+    "ant-design-vue": "1.7.8",
+    "clean-webpack-plugin": "^4.0.0",
+    "core-js": "^3.8.3",
+    "vue": "^2.6.14"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/babel-plugin-transform-vue-jsx": "^1.4.0",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "babel-loader": "^9.1.3",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "gulp": "^5.0.0",
+    "gulp-less": "^5.0.0",
+    "gulp-minify-css": "^1.2.4",
+    "vue-loader": "^15.10.1",
+    "vue-template-compiler": "^2.6.14",
+    "webpack-cli": "^5.1.4"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/plugins/less/Table.less

@@ -0,0 +1,4 @@
+.Table {
+  width: 100%;
+  height: 100%;
+}

package/plugins/lib/Button/index.js

@@ -0,0 +1,90 @@
+// import Bus from './Bus'
+// import store from '@/store'
+// import global from '@/config/index'
+import Message from 'ant-design-vue/es/message' 
+import { Button, Upload, Popconfirm } from 'ant-design-vue' 
+
+let UploadUrl = `${global.WEBSWG}${global.BASEURL}`
+
+export default {
+  name: "Button",
+  data() {
+    return {
+        PopconfirmProps: {
+          title: "确定执行此操作吗？",
+          okText: "确定",
+          cancelText: "取消",
+          placement: "topRight"
+        },
+        UploadProps: {
+          name: "file",
+          headers: { token: store.getters.token },
+          showUploadList: false 
+        } 
+    } 
+  },
+  props: {
+    buttonProps: {
+        type: [ Array, Object ],
+        default: () => ({})
+    }
+  }, 
+  methods: {
+    UploadBtn( props ) {
+      const { $data: { UploadProps }, ButtonRender, UploadChange } = this
+      UploadProps.action = UploadUrl + props.action 
+      return (
+        <Upload props={ UploadProps } {...{ on: { change: UploadChange,...props.event } }} >
+            { ButtonRender( props ) }
+        </Upload>
+      )
+    },
+    UploadChange({ file }) {
+      if(!file.hasOwnProperty('response')) return
+      const { code, msg } = file.response
+      code == 200 ? 
+      Message.success('导入成功！'):
+      Message.error(msg)
+      Bus.$emit('ButtonUploadOver')
+    }, 
+    PopconfirmBtn( props ) {
+      const { $data: { PopconfirmProps }, ButtonRender } = this
+      return (
+        <Popconfirm props={ PopconfirmProps } {...{ on: props.event }} >
+            { ButtonRender( props ) }
+        </Popconfirm>
+      ) 
+    }, 
+    ButtonRender( props ) {
+    //   const buttonEvent = props.type
+      return (
+        <Button
+            props={ props }
+            {...{ on: props.event }}
+        >
+            { props.text }
+        </Button>
+      )
+    }, 
+    SwitchButton( props ) {
+        const { PopconfirmBtn, UploadBtn, ButtonRender } = this
+        if( props.mode == 'popconfirm' ) return PopconfirmBtn( props )
+        else if( props.mode == 'upload' ) return UploadBtn( props )
+        return ButtonRender( props )
+    }
+  },
+  render() {
+    const { buttonProps, SwitchButton } = this
+    // console.log( buttonProps.constructor === Array )
+
+    return (
+      <div class='ButtonDiversity'> 
+        { buttonProps.constructor === Array ? (
+            buttonProps.map( props => {
+                return SwitchButton( props )
+            }) 
+        ) : ( SwitchButton( buttonProps ) ) }
+      </div>
+    )
+  }
+}

package/plugins/lib/Form/formSearch.vue

@@ -0,0 +1,166 @@
+<template>
+
+    <FormModel :model="searchForm" ref="searchForm" layout="inline" @submit="handleSearch" class="AformSearch"> 
+
+        <FormModelItem
+            :key="i"
+            :prop="node.model"
+            :label="node.label"
+            :style="getFormWidth(node, matchMediaSize)"
+            v-for="(node,i) in formSetting.slice(0,count)"
+        >  
+
+            <component
+                v-on="node.event"
+                v-bind="node.attrs"
+                :is="node.is || 'Input'"
+                :placeholder='node.is | defaultPlaceholder'
+                v-model="searchForm[node.model]"
+            /> 
+
+        </FormModelItem> 
+
+        <div class="FormActions">
+            <Button type="primary" html-type="submit" >搜索</Button>
+            <Button :style="{ marginLeft: '8px' }" @click="handleReset">重置</Button>
+            <a @click="advanced = !advanced" style="margin-left: 8px" v-if="formSetting.length > 3">
+              {{ advanced ? '收起' : '展开' }}
+              <a-icon :type="advanced ? 'up' : 'down'"/>
+            </a>
+        </div>
+
+    </FormModel>
+
+</template>
+<script>
+
+import { FormModel,Button,Radio,Input,InputNumber,Checkbox,DatePicker,TimePicker } from 'ant-design-vue' 
+
+export default {
+  components: { 
+    FormModel,
+    FormModelItem: FormModel.Item,
+    Button,
+    Radio,
+    Input,
+    InputNumber,
+    Checkbox,
+    DatePicker,
+    TimePicker, 
+    ASelectCustom: () => import('./components/form-select-custom')
+  },
+  data() {
+    return {
+      advanced: false,
+      matchMediaSize: 0
+    }
+  },
+  props: {
+    value: {
+        type: Object,
+        default: () => ({})
+    },
+    layoutSize: {
+        type: Number,
+        default: 4,
+        validator: (value) => {
+            return value <= 4
+        }
+    },
+    formSetting: {
+        type: Array,
+        default: () => ([])
+    },
+    // 紧凑型和宽松型 
+    // default 宽松型
+    // middle 紧凑型
+    searchStyle: {
+      type: String,
+      default: 'default'
+    }
+  },
+  computed: {
+    matchMedia() {
+      return {
+        "(max-width: 576px)": 1,
+        "(min-width: 576px) and (max-width: 992px)": this.layoutSize - 2,
+        "(min-width: 992px)": this.layoutSize
+      }
+    },
+    count() {
+      return this.advanced ? this.formSetting.length : 3 
+    },
+    searchForm: {
+      get() {
+        return this.value
+      },
+      set(newValue) {
+        this.$emit('input', newValue)
+      }
+    }
+  },
+  filters: {
+    defaultPlaceholder( is ) {
+      if( is && is.includes( 'range' ) ) return [ '开始时间', '结束时间' ]
+      return /(select|picker|radio|upload)/.test(is) ? "请选择" : "请输入"
+    }
+  },
+  mounted() {
+    this.matchMediaSize = this.layoutSize
+    Object.keys(this.matchMedia).forEach( media => 
+      window.matchMedia(media).addEventListener('change', this.handleResize) )
+  },
+  methods: { 
+    handleResize(x) {
+      x.matches && ( this.matchMediaSize = this.matchMedia[x.media] )
+    },
+    getFormWidth(e) {
+      const gap = {
+        middle: '16px',
+        default: '24px'
+      }
+      return `flex: 0 1 calc((${( 100 / this.matchMediaSize ) * ( e.size ?? 1 )}% - ${gap[this.searchStyle]})); margin-right: ${gap[this.searchStyle]};`
+    },
+    handleSearch(e) {
+      e.preventDefault()
+      this.$emit('formSearch', this.searchForm) 
+    },
+    handleReset() {
+      this.$refs.searchForm.resetFields()
+      this.$emit('formReset')  
+    }
+  }
+} 
+</script>
+<style lang="less" scoped>
+  .AformSearch {
+    .flex-mixins(@justify: flex-start);
+
+    .ant-form-item {
+        display: inline-flex;
+        margin-right: unset;
+
+        :deep( .ant-form-item-label ) {
+            min-width: 70px;
+            max-width: 85px;
+            text-align: right;
+        }
+
+        :deep( .ant-form-item-control-wrapper ) {
+            flex: 1;
+        } 
+
+        :deep(.ant-select),
+        :deep(.ant-input-number),
+        :deep(.ant-calendar-picker) {
+            width: 100% !important;
+        }  
+    }
+
+    .FormActions {
+        flex: 1;
+        text-align: right;
+        margin-right: 16px;
+    }
+  }
+</style>

package/plugins/lib/Table/Table.vue

@@ -0,0 +1,214 @@
+<template>
+  <div :class="[tableStyle, 'publicTable']"> 
+      <Table
+        :size="tableSize"
+        v-bind="$attrs"
+        v-on="$listeners"
+        :data-source="datas"
+        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" 
+        :rowKey="(record, i) => record.id ?? i"
+        :pagination="false"
+        :locale="locale"
+        class="tableDeploy"
+      >  
+        <div class="tableTitle" slot="title">
+          <slot name="tableTitle" />
+          <div class="tableOperate">
+            <slot name="ActionsButton" />
+            <!-- <Button :buttonProps="tableButtonSet" class="tableButtonOperate" v-if="tableButtonSet?.length" /> -->
+          </div>
+        </div>  
+
+        <template v-for="{ dataIndex } in $attrs.columns" #[dataIndex]>
+          <!-- 自定义头部渲染 -->
+          <slot :name="dataIndex" />
+        </template>
+
+        <template #customRender="text, record, i, column">
+          <slot :name="column.dataIndex" :customProps="record" :text="text" :index="i" />
+        </template>
+      </Table>
+
+      <Pagination
+        class="pagination"
+        size="small"
+        :pageSizeOptions="pageSizeOptions"
+        :show-total="total => `共 ${total} 条记录`"
+        show-size-changer
+        show-quick-jumper
+        :defaultCurrent="1"
+        :pageSize.sync="pagination.size"
+        :current="pagination.current"
+        @showSizeChange="paginationChange"
+        @change="paginationChange"
+        :total="pagination.total"
+      />
+
+  </div>
+</template>
+
+<script>
+
+// import Bus from './Bus' 
+// import Button from '../Button' 
+
+// import API from '@/api/api_publicGlobal' 
+
+import { Table, Pagination } from 'ant-design-vue'
+
+// import { downLoadFn } from '@/utils/public'
+
+const setTips = {
+  Delete: '删除',
+  Deletes: '批量删除',
+  Export: '导出',
+  Import: '导入',
+  Template: '下载模板'
+}
+
+export default {
+  components: { 
+    Table,
+    // Button,
+    Pagination,
+    // formSearch: () => import('@/components/public-form/formSearch')
+  }, 
+  name: 'UTable',  
+  data() {
+    return {
+      selectedRowKeys: [],
+      datas: [],
+      locale: {
+        emptyText: <div class="tableEmpty">
+           <span>暂无数据</span>
+        </div> 
+      },
+      AnimateReload: false,
+      pagination: {
+        total: 0,
+        size: 10,
+        current: 1
+      },
+      searchForm: {}
+    }
+  },
+  props: {
+    // 紧凑型和宽松型 
+    // relax 宽松型
+    // compact 紧凑型
+    tableStyle: {
+      type: String,
+      default: 'compact'
+    },
+    // compact 紧凑型情况下是否有分割线
+    tableSplit: {
+      type: Boolean,
+      default: true
+    },
+    // 配置分页数据
+    pageSizeOptions: {
+      type: Array,
+      default: () => ['10', '15', '20', '30', '50']
+    },
+    tableCallback: Function,
+    // 配置查询表格URL 适用场景：没有search或者不需处理search结果的情景
+    tablePageUrl: String,
+    // 配置除tableButtonSet之外的操作按钮
+    tableOperateProps: [Array, Object],
+    // 配置导入、导出、下载模板、批量删除地址URL，根据配置结果来匹配按钮
+    tableButtonSetUrl: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    tableSize() {
+      return this.tableStyle == 'compact' ? 'middle' : 'default'
+    },
+    tableButtonSet() {
+      let tableButtonSet = []
+      const setActions = {
+        Deletes: {
+          type: 'danger',
+          mode: 'popconfirm',
+          event: { confirm: () => this.tableActionsSet('Deletes') }
+        },
+        Export: { event: { click: () => this.tableActionsSet('Export') } },
+        Import: { mode: 'upload', action: this.tableButtonSetUrl.Import },
+        Template: { event: { click: () => this.tableActionsSet('Template') } }
+      }
+      Object.keys(setActions).forEach(action => {
+        if (this.tableButtonSetUrl.hasOwnProperty(action)) tableButtonSet.push({ text: setTips[action], ...setActions[action] })
+      })
+      this.tableOperateProps &&
+        (this.tableOperateProps.constructor === Array ? (tableButtonSet = [].concat(this.tableOperateProps, tableButtonSet)) : tableButtonSet.unshift(this.tableOperateProps))
+      return tableButtonSet
+    }
+  },
+  watch: {
+    // tableButtonSetUrl(){
+    //   this.tableButtonSetType()
+    // }
+    '$attrs.formDefault': {
+      handler(e) {
+        this.searchForm = { ...e }
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    // Bus.$on('ButtonUploadOver', () => this.queryTableList())
+    // this.$global.AModal_bus.$on('changeTableOperateProps', e => this.tableOperateProps = e)
+    // Bus.$on('tableActionsSet', (method, params) => this.tableActionsSet(method, params))
+    !this.$attrs.formSetting && this.queryTableList()
+    // this.tableButtonSetType()
+  },
+  methods: {
+    onSelectChange(selectedKey, selectedRecord) {
+      this.selectedRowKeys = selectedKey
+      this.$emit('selectedRecords', selectedRecord)
+    },
+    paginationChange(current, pageSize) {
+      this.pagination.size = pageSize
+      this.pagination.current = current
+      this.queryTableList()
+    },
+    tableToRefresh() { 
+      this.queryTableList()
+      this.AnimateReload = true
+      setTimeout(() => (this.AnimateReload = false), 2000)
+    },
+    tableButtonSetType() {
+      let { tableButtonSetUrl, tableDefaultActions, tableOperateProps } = this
+      let tableButtonSet = tableDefaultActions.filter(action => Object.keys(tableButtonSetUrl).includes(action.method))
+      tableOperateProps && (tableOperateProps === Array ? (tableButtonSet = tableOperateProps.concat(tableButtonSet)) : tableButtonSet.unshift(tableOperateProps))
+      this.tableButtonSet = tableButtonSet
+    },
+    tableActionsSet(method, params = {}) {
+      // method为实际操作方法名称标识
+      // params为传参
+      const IsHasCheck = ['Export', 'Deletes'].includes(method)
+      let queryParams = IsHasCheck ? this.selectedRowKeys : params
+      if (IsHasCheck && !this.selectedRowKeys?.length) return this.$message.error('请先选择数据!')
+      // API[`tableSet${method}`](this.tableButtonSetUrl[method], queryParams).then(Response => {
+      //   if (Response && Response.hasOwnProperty('headers')) {
+      //     const i = Response.headers['content-disposition'].indexOf('%')
+      //     // downLoadFn(Response.response, decodeURI(Response.headers['content-disposition'].slice(i)))
+      //   }
+      //   this.$message.success(`${setTips[method]}成功！`)
+      //   this.queryTableList()
+      // })
+    },
+    async queryTableList() {
+      const params = { ...this.pagination, ...this.searchForm }
+      let request = this.tableCallback
+      // let request = this.tableCallback ?? API.queryTableList
+      await request(params, this.tablePageUrl).then(({ records, total }) => ((this.datas = records), this.$set(this.pagination, 'total', total)))
+    } 
+  }
+}
+</script>
+
+<style lang="less" scoped>
+// @import url('../less/Table.less');
+</style>

package/plugins/lib/Table/index.js

@@ -0,0 +1,7 @@
+import Table from './Table.vue'
+ 
+Table.install = function (Vue) { 
+  Vue.component(Table.name, Table)
+}
+
+export default Table

package/plugins/lib/index.js

@@ -0,0 +1,17 @@
+// 将组件库中定义的所有组件引入并导出
+import Table from './Table'
+ 
+const components = {
+  Table
+}
+
+const install = function (Vue) { 
+  if (install.installed) return
+  Object.keys(components).forEach(component => { 
+    Vue.component(components[component].name, components[component])
+  })
+}
+
+export default {
+  install
+}