仓储

src/components/Pagination/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="pagination-container">
+    <el-pagination
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :total="total"
+      v-bind="$attrs"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Pagination',
+  props: {
+    total: {
+      required: true,
+      type: Number,
+    },
+    page: {
+      type: Number,
+      default: 1,
+    },
+    limit: {
+      type: Number,
+      default: 10,
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 50, 100, 200]
+      },
+    },
+    layout: {
+      type: String,
+      default: 'total, sizes, prev, pager, next, jumper',
+    },
+    background: {
+      type: Boolean,
+      default: true,
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true,
+    },
+    hidden: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page
+      },
+      set(val) {
+        this.$emit('update:page', val)
+      },
+    },
+    pageSize: {
+      get() {
+        return this.limit
+      },
+      set(val) {
+        this.$emit('update:limit', val)
+      },
+    },
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.$emit('pagination', { page: this.currentPage, limit: val })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    },
+    handleCurrentChange(val) {
+      this.$emit('pagination', { page: val, limit: this.pageSize })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.pagination-container {
+  background: #fff;
+  padding: 32px 16px;
+}
+.pagination-container.hidden {
+  display: none;
+}
+/deep/ .el-pagination {
+  left: 40%;
+  position: relative;
+  // margin-left: -400px;
+}
+</style>

src/components/example/index.vue

@@ -0,0 +1,393 @@
+<template>
+  <el-form ref="form" :model="insideData" :rules="insideRules" :label-width="labelWidth + 'px'">
+    <el-row>
+      <el-col v-for="(value, key, index) in insideConfig" :key="index" :span="24 / value.span">
+        <el-form-item v-if="value.if" :label="value.label" :prop="key">
+          <!-- 解决单选多选框高度太矮导致格式错乱问题 -->
+          <div style="min-height: 40px">
+            <!--
+              输入框:
+                type: 'input'
+                itemType:     原生 input 的 type（text(默认)、number、password、textarea等，默认text）
+                placeholder:  输入框占位文本，默认‘请输入’+label
+                width:        文本宽度
+            -->
+            <el-input
+              v-if="value.type === 'input'"
+              v-model="insideData[key]"
+              :placeholder="value.placeholder"
+              :type="value.itemType"
+              :disabled="value.disabled"
+              :clearable="value.clearable"
+              :show-password="value.itemType === 'password'"
+              :autosize="{ minRows: 4, maxRows: 7 }"
+              :style="{ width: value.width || '100%' }"
+            />
+
+            <!--
+              下拉选择框:
+                type: 'select'
+                placeholder:  下拉选择框占位文本，默认‘请选择’+label
+                multiple:     多选，默认false
+                filterable:   可搜索，默认true
+                data:         绑定数据
+                keyName:      绑定key，默认‘key’
+                labelName:    绑定label，默认‘label’
+                dict:         字典
+                setData()     获取数据方法
+                binding:      执行setData()返回参数的绑定路径
+            -->
+            <el-select
+              v-else-if="value.type === 'select'"
+              v-model="insideData[key]"
+              :placeholder="value.placeholder"
+              :multiple="value.multiple"
+              :disabled="value.disabled"
+              :clearable="value.clearable"
+              :filterable="value.filterable"
+              :style="{ width: value.width || '100%' }"
+            >
+              <el-option v-for="item in value.data" :key="item[value.keyName]" :label="item[value.labelName]" :value="item[value.keyName]" />
+            </el-select>
+
+            <!--
+             单选:
+               type: 'radio'
+               data:         绑定数据
+               keyName:      绑定key，默认‘key’
+               labelName:    绑定label，默认‘label’
+               dict:         字典
+               setData()     获取数据方法
+               binding:      执行setData()返回参数的绑定路径
+            -->
+            <el-radio-group v-else-if="value.type === 'radio'" v-model="insideData[key]" :disabled="value.disabled">
+              <el-radio v-for="item in value.data" :key="item[value.keyName]" :label="item[value.keyName]">
+                {{ item[value.labelName] }}
+              </el-radio>
+            </el-radio-group>
+
+            <!--
+            多选:
+             type: 'checkbox'
+             keyName:     绑定key
+             labelName:   绑定label
+             dict:        字典
+             setData()    获取数据方法
+             binding:     执行setData()返回参数的绑定路径
+           -->
+            <el-checkbox-group v-else-if="value.type === 'checkbox'" v-model="insideData[key]" :disabled="value.disabled">
+              <el-checkbox v-for="item in value.data" :key="item[value.keyName]" :label="item[value.keyName]">
+                {{ item[value.labelName] }}
+              </el-checkbox>
+            </el-checkbox-group>
+
+            <!--
+             日期选择器:
+              type: 'datePicker'
+              placeholder:   日期选择框占位文本
+              format:        自定义显示与返回的日期格式
+              itemType:      element原生type,默认date（date,week，month，year）
+              pickerOptions: elementUi原生picker-options
+            -->
+            <el-date-picker
+              v-else-if="value.type === 'datePicker'"
+              v-model="insideData[key]"
+              :type="value.itemType"
+              :placeholder="value.placeholder"
+              :format="value.format"
+              :value-format="value.format"
+              :picker-options="value.pickerOptions"
+              :disabled="value.disabled"
+              :clearable="value.clearable"
+              :style="{ width: value.width || '100%' }"
+            />
+
+            <!--
+              日期范围选择器:
+               type: 'dateRange'
+               beginName:      开始时间绑定名称（默认beginTime）
+               endName:        结束时间绑定名称（默认endTime）
+             -->
+            <el-date-picker
+              v-else-if="value.type === 'dateRange'"
+              v-model="dateRangeData[key]"
+              type="daterange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              value-format="yyyy-MM-dd"
+              :disabled="value.disabled"
+              :clearable="value.clearable"
+              @change="dateRangeChange(value, key)"
+              :style="{ width: value.width || '100%' }"
+            />
+
+            <!--
+              单文件上传:
+               type: 'upload'
+             -->
+            <!-- <div v-else-if="value.type === 'upload'">
+              <file-select v-if="!value.disabled" v-model="fileData[key]" @selectAfter="selectFile(key)" />
+              <fly-img style="padding-top: 10px" :src="insideData[key]" :del="!value.disabled" @close="removeFile(key)" />
+            </div> -->
+
+            <!--
+            多文件上传:
+             type: 'upload'
+             maxSelectNum:    最多上传几个文件
+           -->
+            <!-- <div v-else-if="value.type === 'uploads'">
+              <file-select v-if="!value.disabled" v-model="insideData[key]" :max-select-num="value.maxSelectNum || 6" />
+              <div v-for="(item, index) in insideData[key]" :key="index">
+                <fly-img style="float: left;padding-top: 10px" :src="item" :del="!value.disabled" @close="insideData[key].splice(index, 1)" />
+              </div>
+            </div> -->
+
+            <!--
+             插槽:
+                slot:       插槽命名
+                span:      一行有几个el-form-item
+                例:
+                  <template v-slot:key>
+                     {{ 'demo' }}
+                  </template>
+            -->
+            <slot v-else :name="key" />
+          </div>
+        </el-form-item>
+      </el-col>
+
+      <!--
+        搜索与重置操作按钮:
+         query: 搜索方法
+       -->
+      <el-col v-if="this.formConfig['operation'] !== undefined" :span="6">
+        <div style="margin-left: 15px">
+          <el-button type="primary" @click="formConfig['operation'].query()">
+            搜索
+          </el-button>
+          <el-button
+            @click="
+              dateRangeData = []
+              formConfig['operation'].reset()
+            "
+          >
+            重置
+          </el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: 'Example',
+  props: {
+    // 表单值
+    value: {
+      type: Object
+    },
+    // 表单配置
+    formConfig: {
+      type: Object,
+      required: true
+    },
+    // 全局label宽度
+    labelWidth: {
+      type: Number,
+      default: 80
+    },
+    // 全局列数
+    span: {
+      type: Number,
+      default: 1
+    },
+    // 全局可清空
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 全局禁用
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      insideConfig: {}, // 内部配置
+      insideData: {}, // 内部数据
+      insideRules: {}, // 内部必填参数校验
+      dateRangeData: [], // 时间段
+      fileData: [] // 文件路径数组
+    }
+  },
+  watch: {
+    value: {
+      handler() {
+        this.insideData = this.value
+      },
+      deep: true,
+      immediate: true
+    },
+    formConfig: {
+      handler() {
+        this.init()
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    // 初始化
+    init() {
+      this.insideConfig = {}
+      for (const key in this.formConfig) {
+        // 跳过特殊方法( operation: 搜索、重置 )
+        if (key === 'operation') {
+          continue
+        }
+        const value = this.formConfig[key]
+        this.insideConfig[key] = {
+          label: value.label,
+          type: value.type ? value.type : 'input',
+          if: value.if === undefined ? true : value.if,
+          span: value.span || this.span,
+          clearable: value.clearable === undefined ? this.clearable : value.clearable,
+          disabled: value.disabled === undefined ? this.disabled : value.disabled
+        }
+        switch (this.insideConfig[key].type) {
+          case 'input':
+            this.inputHandle(key, value)
+            break
+          case 'select':
+            this.selectHandle(key, value)
+            break
+          case 'radio':
+            this.radioHandel(key, value)
+            break
+          case 'checkbox':
+            this.checkboxHandel(key, value)
+            break
+          case 'datePicker':
+            this.datePickerHandel(key, value)
+            break
+          case 'upload':
+            this.uploadHandel(key, value)
+            break
+          case 'uploads':
+            this.uploadsHandel(key, value)
+            break
+        }
+      }
+    },
+
+    // el-input标签处理
+    inputHandle(key, value) {
+      this.insideConfig[key].placeholder = value.placeholder || '请输入' + value.label
+      this.insideConfig[key].itemType = value.itemType || 'text'
+    },
+
+    // el-select标签处理
+    selectHandle(key, value) {
+      this.insideConfig[key].placeholder = value.placeholder || '请选择' + value.label
+      this.insideConfig[key].multiple = value.multiple === undefined ? false : value.multiple
+      this.insideConfig[key].filterable = value.filterable === undefined ? true : value.filterable
+      this.insideConfig[key].keyName = value.keyName || 'key'
+      this.insideConfig[key].labelName = value.labelName || 'label'
+      this.setData(key, value)
+    },
+
+    // el-radio标签处理
+    radioHandel(key, value) {
+      this.insideConfig[key].keyName = value.keyName || 'key'
+      this.insideConfig[key].labelName = value.labelName || 'label'
+      this.setData(key, value)
+    },
+
+    // el-checkbox标签处理
+    checkboxHandel(key, value) {
+      // 默认值
+      if (!this.insideData[key]) {
+        this.$set(this.insideData, key, [])
+      }
+      this.insideConfig[key].keyName = value.keyName || 'key'
+      this.insideConfig[key].labelName = value.labelName || 'label'
+      this.setData(key, value)
+    },
+
+    // el-datePicker标签处理
+    datePickerHandel(key, value) {
+      this.insideConfig[key].placeholder = value.placeholder || '请选择日期'
+      this.insideConfig[key].itemType = value.itemType || 'date'
+      this.insideConfig[key].format = value.format || 'yyyy-MM-dd'
+    },
+
+    // 单文件上传处理
+    uploadHandel(key) {
+      if (this.insideData[key]) {
+        this.$set(this.fileData, key, [this.insideData[key]])
+      } else if (!this.fileData[key]) {
+        this.$set(this.fileData, key, [])
+      }
+    },
+
+    // 多文件上传处理
+    uploadsHandel(key, value) {
+      this.insideConfig[key].maxSelectNum = value.maxSelectNum || 6
+      if (!this.insideData[key]) {
+        this.$set(this.insideData, key, [])
+      }
+    },
+
+    // 获取数据方法
+    async setData(key, value) {
+      if (value.data) {
+        this.insideConfig[key].data = value.data
+      } else if (value.dict) {
+        this.insideConfig[key].keyName = 'dictValue'
+        this.insideConfig[key].labelName = 'dictLabel'
+        this.insideConfig[key].data = await this.getDicts(value.dict)
+        this.$forceUpdate()
+      } else {
+        const itemData = await value.setData()
+        if (value.binding) {
+          this.insideConfig[key].data = value.binding.split('.').reduce((total, cur) => total[cur], itemData)
+        } else {
+          this.insideConfig[key].data = itemData
+        }
+        this.$forceUpdate()
+      }
+    },
+
+    // 赋值开始时间结束时间
+    dateRangeChange(value, key) {
+      if (this.dateRangeData[key] !== null) {
+        this.$set(this.insideData, value['beginName'] || 'beginTime', this.dateRangeData[key][0])
+        this.$set(this.insideData, value['endName'] || 'endTime', this.dateRangeData[key][1])
+      } else {
+        this.$set(this.insideData, value['beginName'] || 'beginTime', undefined)
+        this.$set(this.insideData, value['endName'] || 'endTime', undefined)
+      }
+    },
+
+    // 选择图片
+    selectFile(key) {
+      if (this.fileData[key].length > 0) {
+        this.$set(this.insideData, key, this.fileData[key][0])
+      } else {
+        this.$set(this.insideData, key, undefined)
+      }
+    },
+
+    // 删除图片
+    removeFile(key) {
+      this.$set(this.fileData, key, [])
+      this.$set(this.insideData, key, undefined)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/main.js

@@ -1,35 +1,33 @@
-
-import Vue from 'vue';
-import axios from './router/axios';
-import VueAxios from 'vue-axios';
-import App from './App';
-import router from './router/router';
-import './permission'; // 权限
-import './error'; // 日志
-import './cache';//页面缓存
-import store from './store';
-import {loadStyle} from './util/util'
-import * as urls from '@/config/env';
-import Element from 'element-ui';
-import {
-  iconfontUrl,
-  iconfontVersion
-} from '@/config/env';
-import i18n from './lang'; // Internationalization
-import './styles/common.scss';
-import basicBlock from './components/basic-block/main';
-import basicContainer from './components/basic-container/main';
-import thirdRegister from './components/third-register/main';
-import avueUeditor from 'avue-plugin-ueditor';
-import website from '@/config/website';
-import crudCommon from '@/mixins/crud';
+import Vue from "vue";
+import axios from "./router/axios";
+import VueAxios from "vue-axios";
+import App from "./App";
+import router from "./router/router";
+import "./permission"; // 权限
+import "./error"; // 日志
+import "./cache"; //页面缓存
+import store from "./store";
+import { loadStyle } from "./util/util";
+import * as urls from "@/config/env";
+import Element from "element-ui";
+import { iconfontUrl, iconfontVersion } from "@/config/env";
+import i18n from "./lang"; // Internationalization
+import "./styles/common.scss";
+import basicBlock from "./components/basic-block/main";
+import basicContainer from "./components/basic-container/main";
+import thirdRegister from "./components/third-register/main";
+import avueUeditor from "avue-plugin-ueditor";
+import website from "@/config/website";
+import crudCommon from "@/mixins/crud";
+import Example from "./components/example";
+import Pagination from "./components/Pagination";
 
 //cdn迁移进src目录
-import './assets/cdn/element-ui/2.15.1/theme-chalk/index.css'
-import './assets/cdn/animate/3.5.2/animate.css'
-import './assets/cdn/iconfont/avue/iconfont.css'
-import './assets/cdn/iconfont/saber/iconfont.css'
-import './assets/cdn/avue/2.8.18/index.css'
+import "./assets/cdn/element-ui/2.15.1/theme-chalk/index.css";
+import "./assets/cdn/animate/3.5.2/animate.css";
+import "./assets/cdn/iconfont/avue/iconfont.css";
+import "./assets/cdn/iconfont/saber/iconfont.css";
+import "./assets/cdn/avue/2.8.18/index.css";
 
 // 注册全局crud驱动
 window.$crudCommon = crudCommon;
@@ -37,74 +35,75 @@ window.$crudCommon = crudCommon;
 Vue.use(router);
 Vue.use(VueAxios, axios);
 Vue.use(Element, {
-  i18n: (key, value) => i18n.t(key, value)
+  i18n: (key, value) => i18n.t(key, value),
 });
 Vue.use(window.AVUE, {
-  size: 'small',
-  tableSize: 'small',
+  size: "small",
+  tableSize: "small",
   calcHeight: 65,
-  i18n: (key, value) => i18n.t(key, value)
+  i18n: (key, value) => i18n.t(key, value),
 });
+Vue.use(Example);
+Vue.use(Pagination);
+
 // 注册全局容器
-Vue.component('basicContainer', basicContainer);
-Vue.component('basicBlock', basicBlock);
-Vue.component('thirdRegister', thirdRegister);
-Vue.component('avueUeditor', avueUeditor);
+Vue.component("basicContainer", basicContainer);
+Vue.component("basicBlock", basicBlock);
+Vue.component("thirdRegister", thirdRegister);
+Vue.component("avueUeditor", avueUeditor);
+Vue.component("Example", Example);
+Vue.component("Pagination", Pagination);
+
 // 加载相关url地址
-Object.keys(urls).forEach(key => {
+Object.keys(urls).forEach((key) => {
   Vue.prototype[key] = urls[key];
 });
 // 加载website
 Vue.prototype.website = website;
 // 动态加载阿里云字体库
-iconfontVersion.forEach(ele => {
-  loadStyle(iconfontUrl.replace('$key', ele));
+iconfontVersion.forEach((ele) => {
+  loadStyle(iconfontUrl.replace("$key", ele));
 });
 
-
-
 //乾坤代码
 Vue.config.productionTip = false;
 let instance = null;
 function render({ props = {} } = {}) {
-	const { container } = props;
-	instance = new Vue({
-		router,
-		store,
-		i18n,
-		
-		render: h => h(App)
-	}).$mount(container ? container.querySelector('#fjhxCloudVue') : '#fjhxCloudVue');
-	console.log(instance)
-}
+  const { container } = props;
+  instance = new Vue({
+    router,
+    store,
+    i18n,
 
+    render: (h) => h(App),
+  }).$mount(
+    container ? container.querySelector("#fjhxCloudVue") : "#fjhxCloudVue"
+  );
+  console.log(instance);
+}
 
 // 独立运行时
 (function () {
-	console.log(window.__POWERED_BY_QIANKUN__)
-	if (window.__POWERED_BY_QIANKUN__) {
-		__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
-	} else{
-		render()
-	}
-	
-})()
-  
-
-
+  console.log(window.__POWERED_BY_QIANKUN__);
+  if (window.__POWERED_BY_QIANKUN__) {
+    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
+  } else {
+    render();
+  }
+})();
 
 export async function bootstrap() {
-	console.log('vue app bootstraped');
+  console.log("vue app bootstraped");
 }
 export async function mount(props) {
-	console.log('props from main framework', props.data);
-	render(props);
+  console.log("props from main framework", props.data);
+  render(props);
 }
 export async function unmount() {
-	instance.$destroy();
-	instance.$el.innerHTML = "";
-	instance = null;
-	// router = null;
+  instance.$destroy();
+  instance.$el.innerHTML = "";
+  instance = null;
+  // router = null;
 }
 Vue.config.productionTip = false;
 

src/router/page/index.js

@@ -1,81 +1,110 @@
-import Layout from '@/page/index/'
+import Layout from "@/page/index/";
 
-export default [{
-  path: '/login',
-  name: '登录页',
-  component: () =>
-    import( /* webpackChunkName: "page" */ '@/page/login/index'),
-  meta: {
-    keepAlive: true,
-    isTab: false,
-    isAuth: false
-  }
-},
+export default [
   {
-    path: '/lock',
-    name: '锁屏页',
+    path: "/login",
+    name: "登录页",
     component: () =>
-      import( /* webpackChunkName: "page" */ '@/page/lock/index'),
+      import(/* webpackChunkName: "page" */ "@/page/login/index"),
     meta: {
       keepAlive: true,
       isTab: false,
-      isAuth: false
-    }
+      isAuth: false,
+    },
   },
   {
-    path: '/404',
+    path: "/lock",
+    name: "锁屏页",
+    component: () => import(/* webpackChunkName: "page" */ "@/page/lock/index"),
+    meta: {
+      keepAlive: true,
+      isTab: false,
+      isAuth: false,
+    },
+  },
+  {
+    path: "/404",
     component: () =>
-      import( /* webpackChunkName: "page" */ '@/components/error-page/404'),
-    name: '404',
+      import(/* webpackChunkName: "page" */ "@/components/error-page/404"),
+    name: "404",
     meta: {
       keepAlive: true,
       isTab: false,
-      isAuth: false
-    }
-
+      isAuth: false,
+    },
   },
   {
-    path: '/403',
+    path: "/403",
     component: () =>
-      import( /* webpackChunkName: "page" */ '@/components/error-page/403'),
-    name: '403',
+      import(/* webpackChunkName: "page" */ "@/components/error-page/403"),
+    name: "403",
     meta: {
       keepAlive: true,
       isTab: false,
-      isAuth: false
-    }
+      isAuth: false,
+    },
   },
   {
-    path: '/500',
+    path: "/500",
     component: () =>
-      import( /* webpackChunkName: "page" */ '@/components/error-page/500'),
-    name: '500',
+      import(/* webpackChunkName: "page" */ "@/components/error-page/500"),
+    name: "500",
     meta: {
       keepAlive: true,
       isTab: false,
-      isAuth: false
-    }
+      isAuth: false,
+    },
   },
   {
-    path: '/',
-    name: '主页',
-    redirect: '/wel'
+    path: "/",
+    name: "主页",
+    redirect: "/wel",
   },
   {
-    path: '/myiframe',
+    path: "/myiframe",
     component: Layout,
-    redirect: '/myiframe',
-    children: [{
-      path: ":routerPath",
-      name: 'iframe',
-      component: () =>
-        import( /* webpackChunkName: "page" */ '@/components/iframe/main'),
-      props: true
-    }]
-
+    redirect: "/myiframe",
+    children: [
+      {
+        path: ":routerPath",
+        name: "iframe",
+        component: () =>
+          import(/* webpackChunkName: "page" */ "@/components/iframe/main"),
+        props: true,
+      },
+    ],
   },
   {
-    path: '*',
-    redirect: '/404'
-  }
-]
+    path: "*",
+    redirect: "/404",
+  },
+  {
+    path: "/warehouse-maintenance",
+    name: "仓库维护",
+    component: () =>
+      import(
+        /* webpackChunkName: "page" */ "@/views/basic-configuration/warehouse-maintenance/index"
+      ),
+    meta: {
+      keepAlive: true,
+      isTab: false,
+      isAuth: false,
+    },
+  },
+  // {
+  //   path: "/basic-configuration/warehouse-maintenance",
+  //   component: Layout,
+  //   redirect: "/basic-configuration/warehouse-maintenance/index",
+  //   children: [
+  //     {
+  //       path: "index",
+  //       name: "数据看板",
+  //       component: () =>
+  //         import(
+  //           /* webpackChunkName: "page" */ "@/views/basic-configuration/warehouse-maintenance/index"
+  //         ),
+  //       props: true,
+  //     },
+  //   ],
+  // },
+];

src/router/router.js

@@ -6,37 +6,42 @@
  * isTab是否加入到tag导航
  * isAuth是否需要授权
  */
- import Vue from 'vue';
- import VueRouter from 'vue-router';
- import PageRouter from './page/' // 页面路由
- import ViewsRouter from './views/' // 页面路由
- import AvueRouter from './avue-router'; //封装的路由控制方法
- import i18n from '@/lang' // Internationalization 国际化 多语言
- import Store from '../store/'; // vuex
- Vue.use(VueRouter)
- //创建路由
- export const createRouter = () => new VueRouter({
-   routes: [...PageRouter, ...ViewsRouter]
- })
- const Router = createRouter() // 获得 route 实例
- // 初始化和注册 AvueRouter
- AvueRouter.install(Vue, {
-   router: Router,
-   store: Store,
-   i18n: i18n,
-   keepAlive: false,
- });
- Router.$avueRouter.formatRoutes(Store.state.user.menuAll, true); // 动态路由核心方法
- Router.addRoutes([...PageRouter, ...ViewsRouter]);
- export function resetRouter () {  // 重置路由 比如用于身份验证失败，需要重新登录时 先清空当前的路有权限
-   const newRouter = createRouter()
-   Router.matcher = newRouter.matcher // reset router
-   AvueRouter.install(Vue, {
-     router: Router,
-     store: Store,
-     i18n: i18n,
-     keepAlive: false,
-   });
- }
- export default Router
- 
+import Vue from "vue";
+import VueRouter from "vue-router";
+import PageRouter from "./page/"; // 页面路由
+import ViewsRouter from "./views/"; // 页面路由
+import AvueRouter from "./avue-router"; //封装的路由控制方法
+import i18n from "@/lang"; // Internationalization 国际化 多语言
+import Store from "../store/"; // vuex
+Vue.use(VueRouter);
+//创建路由
+export const createRouter = () =>
+  new VueRouter({
+    mode: "history", // 去掉url中的#
+    scrollBehavior: () => ({
+      y: 0,
+    }),
+    routes: [...PageRouter, ...ViewsRouter],
+  });
+const Router = createRouter(); // 获得 route 实例
+// 初始化和注册 AvueRouter
+AvueRouter.install(Vue, {
+  router: Router,
+  store: Store,
+  i18n: i18n,
+  keepAlive: false,
+});
+Router.$avueRouter.formatRoutes(Store.state.user.menuAll, true); // 动态路由核心方法
+Router.addRoutes([...PageRouter, ...ViewsRouter]);
+export function resetRouter() {
+  // 重置路由 比如用于身份验证失败，需要重新登录时 先清空当前的路有权限
+  const newRouter = createRouter();
+  Router.matcher = newRouter.matcher; // reset router
+  AvueRouter.install(Vue, {
+    router: Router,
+    store: Store,
+    i18n: i18n,
+    keepAlive: false,
+  });
+}
+export default Router;

src/views/basic-configuration/example.vue

@@ -0,0 +1,135 @@
+<template>
+  <el-card class="box-card">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent>
+      <el-form-item label="合同号" prop="code">
+        <el-input v-model="queryParams.code" placeholder="请输入合同号" clearable size="small" @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="日期:">
+        <el-col :span="11">
+          <el-date-picker
+            type="date"
+            placeholder="选择开始日期"
+            v-model="queryParams.strTime"
+            value-format="yyyy-MM-dd"
+            size="small"
+            style="width: 100%"
+            @change="handleQuery"
+          ></el-date-picker>
+        </el-col>
+        <el-col class="line" :span="2" style="text-align: center">至</el-col>
+        <el-col :span="11">
+          <el-date-picker
+            type="date"
+            placeholder="选择结束日期"
+            v-model="queryParams.endTime"
+            value-format="yyyy-MM-dd"
+            size="small"
+            style="width: 100%"
+            @change="handleQuery"
+          ></el-date-picker>
+        </el-col>
+      </el-form-item>
+      <el-form-item>
+        <el-button size="mini" @click="handleQuery" class="searchBtn">搜索</el-button>
+        <el-button size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" style="margin-bottom: 10px">
+      <el-col :span="1.5">
+        <el-button type="primary" size="mini" @click="handleAdd">新增</el-button>
+      </el-col>
+    </el-row>
+
+    <el-table :data="tableList" :cell-style="{ padding: '0' }" :row-style="{ height: '35px' }" v-loading="loading" header-row-class-name="tableHeader">
+      <el-table-column label="AAAA" align="center" prop="AAAA" />
+      <el-table-column label="操作" align="center" width="140" fixed="right">
+        <template slot-scope="scope">
+          <el-button type="text" @click="clickUpdate(scope.row.id)" v-db-click>修改</el-button>
+          <el-button type="text" @click="clickRemove(scope.row.id)" v-db-click>删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'example',
+  data() {
+    return {
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        code: '',
+        strTime: '',
+        endTime: '',
+      },
+      loading: false,
+      tableList: [],
+      total: 0,
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    getList() {
+      // this.loading = true
+      // API.list(this.queryParams).then(
+      //   (res) => {
+      //     this.tableList = res.data.data.list
+      //     this.loading = false
+      //   },
+      //   (err) => {
+      //     console.log('list: ' + err)
+      //     this.loading = false
+      //   }
+      // )
+      // API.listCount(this.queryParams).then((res) => {
+      //   this.total = res.data.data.count
+      // })
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+* {
+  font-size: 12px;
+}
+.box-card {
+  height: calc(100vh - 110px);
+  overflow-y: auto;
+}
+.searchBtn {
+  background: #20b2aa;
+  color: #fff;
+  border: 1px solid #20b2aa;
+}
+
+::v-deep {
+  .el-input__inner {
+    border-radius: 1px;
+  }
+  .el-button--mini {
+    border-radius: 1px;
+  }
+  .tableHeader th {
+    background-color: #edf0f5;
+    height: 35px;
+    padding: 0;
+  }
+}
+</style>

src/views/basic-configuration/warehouse-maintenance/index.vue

@@ -0,0 +1,228 @@
+<template>
+  <el-card class="box-card">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent>
+      <el-form-item label="关键字" prop="keyword">
+        <el-input v-model="queryParams.keyword" placeholder="请输入关键字" clearable size="small" @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="仓库类型" prop="warehouseType">
+        <el-select v-model="queryParams.warehouseType" placeholder="请选择仓库类型">
+          <el-option v-for="item in warehouseType" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" style="margin-bottom: 10px">
+      <el-col :span="1.5">
+        <el-button type="primary" size="mini" @click="handleAdd">添加仓库</el-button>
+      </el-col>
+    </el-row>
+
+    <el-table :data="tableList" :cell-style="{ padding: '0' }" :row-style="{ height: '35px' }" v-loading="loading" header-row-class-name="tableHeader">
+      <el-table-column label="租户名称" align="center" width="240" />
+      <el-table-column label="仓库类型" align="center" width="140" />
+      <el-table-column label="仓库名称" align="center" width="180" />
+      <el-table-column label="仓库说明" align="center" />
+      <el-table-column label="操作" align="center" width="120">
+        <template slot-scope="scope">
+          <el-button type="text" @click="clickUpdate(scope.row)" v-db-click>修改</el-button>
+          <el-button type="text" @click="clickRemove(scope.row)" v-db-click>删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+
+    <!-- <Example v-model="formData" :form-config="formConfig" :clearable="false" :disabled="false" :label-width="100" :span="2">
+      <template v-slot:testSlot>
+        {{ '测试插槽' }}
+      </template>
+    </Example> -->
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'warehouse-maintenance',
+  data() {
+    return {
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        keyword: '',
+        warehouseType: ''
+      },
+      warehouseType: [
+        { value: 1, label: '类型1' },
+        { value: 2, label: '类型2' }
+      ],
+      loading: false,
+      tableList: [],
+      total: 0,
+      formData: {
+        pageNum: 1,
+        pageSize: 10,
+        keyword: '',
+        warehouseType: ''
+      },
+      formConfig: {
+        keyword: {
+          label: '关键字:',
+          type: 'input',
+          span: 6
+        },
+        warehouseType: {
+          label: '仓库类型:',
+          type: 'select',
+          span: 6,
+          data: [
+            { key: 1, label: '类型1' },
+            { key: 2, label: '类型2' }
+          ]
+        },
+        operation: {
+          // 搜索按钮操作
+          query: () => {
+            this.formData.pageNum = 1
+            this.query()
+          },
+          // 重置按钮操作
+          reset: () => {
+            this.formData = { pageNum: 1, pageSize: 10, input: '测试', checkbox: [1, 2], filesUpload: [] }
+            this.reset()
+          }
+        }
+        // input2: {
+        //   label: '输入框1',
+        //   span: 6
+        // },
+        // text: {
+        //   label: '文本域',
+        //   itemType: 'textarea',
+        //   span: 1,
+        //   disabled: false
+        // },
+        // select1: {
+        //   label: '下拉选择框1',
+        //   type: 'select',
+        //   data: [
+        //     { key: 1, label: 'a1' },
+        //     { key: 2, label: 'a2' }
+        //   ]
+        // },
+        // select2: {
+        //   label: '下拉选择框2',
+        //   type: 'select',
+        //   dict: 'sys_normal_disable'
+        // },
+        // radio: {
+        //   label: '单选',
+        //   type: 'radio',
+        //   data: [
+        //     { key: 1, label: 'a1' },
+        //     { key: 2, label: 'a2' }
+        //   ]
+        // },
+        // checkbox: {
+        //   label: '多选',
+        //   type: 'checkbox',
+        //   data: [
+        //     { key: 1, label: 'a1' },
+        //     { key: 2, label: 'a2' }
+        //   ]
+        // },
+        // datePicker: {
+        //   label: '日期选择',
+        //   type: 'datePicker'
+        // },
+        // dateRange: {
+        //   label: '日期段选择',
+        //   type: 'dateRange'
+        // },
+        // fileUpload: {
+        //   label: '单文件选择',
+        //   type: 'upload'
+        // },
+        // filesUpload: {
+        //   label: '多文件选择',
+        //   type: 'uploads',
+        //   maxSelectNum: 3
+        // },
+        // testSlot: {
+        //   label: '插槽',
+        //   type: 'slot',
+        //   span: 1
+        // },
+        // operation: {
+        //   // 搜索按钮操作
+        //   query: () => {
+        //     this.formData.pageNum = 1
+        //     console.log('query')
+        //   },
+        //   // 重置按钮操作
+        //   reset: () => {
+        //     this.formData = { pageNum: 1, pageSize: 10, input: '测试', checkbox: [1, 2], filesUpload: [] }
+        //     console.log('reset')
+        //   }
+        // }
+      }
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    query() {
+      console.log('query')
+    },
+    reset() {
+      console.log('reset')
+    },
+    getList() {
+      console.log('getList')
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    handleAdd() {
+      console.log('handleAdd')
+    },
+    clickUpdate() {
+      console.log('clickUpdate')
+    },
+    clickUpdate() {
+      console.log('clickUpdate')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.box-card {
+  height: calc(100vh - 20px);
+  margin: 10px;
+  overflow-y: auto;
+}
+::v-deep {
+  .el-input__inner {
+    border-radius: 1px;
+  }
+  .el-button--mini {
+    border-radius: 1px;
+  }
+  .tableHeader th {
+    background-color: #edf0f5;
+    height: 35px;
+    padding: 0;
+  }
+}
+</style>

vue.config.js

@@ -1,71 +1,69 @@
-
-const packageName = require('./package.json').name;
-console.log(packageName)
+const packageName = require("./package.json").name;
+console.log(packageName);
 module.exports = {
-	//路径前缀
-	//打包配置，解决页面空白的配置方案。
-
-	lintOnSave: true,
-	runtimeCompiler: true,
-	productionSourceMap: false,
-	chainWebpack: config => {
-		config.module
-			.rule("fonts")
-			.test(/.(ttf|otf|eot|woff|woff2)$/)
-			.use("url-loader")
-			.loader("url-loader")
-			.tap((options) => {
-				options = {
-					// limit: 10000,
-					name: "/static/fonts/[name].[ext]",
-				};
-				return options;
-			});
+  //路径前缀
+  //打包配置，解决页面空白的配置方案。
 
-	},
-	// chainWebpack: (config) => {
+  lintOnSave: true,
+  runtimeCompiler: true,
+  productionSourceMap: false,
+  chainWebpack: (config) => {
+    config.module
+      .rule("fonts")
+      .test(/.(ttf|otf|eot|woff|woff2)$/)
+      .use("url-loader")
+      .loader("url-loader")
+      .tap((options) => {
+        options = {
+          // limit: 10000,
+          name: "/static/fonts/[name].[ext]",
+        };
+        return options;
+      });
+  },
+  // chainWebpack: (config) => {
 
-	// 	忽略的打包文件
-	// 	config.externals({
-	// 		'vue': 'Vue',
-	// 		'vue-router': 'VueRouter',
-	// 		'vuex': 'Vuex',
-	// 		'axios': 'axios',
-	// 		'element-ui': 'ELEMENT',
-	// 	});
-	// 	const entry = config.entry('app');
-	// 	entry.add('babel-polyfill').end();
-	// 	entry.add('classlist-polyfill').end();
-	// 	entry.add('@/mock').end();
-	// },
-	css: {
-		extract: { ignoreOrder: true }
-	},
-	//开发模式反向代理配置，生产模式请使用Nginx部署并配置反向代理
-	devServer: {
-		port: 1888,
-		headers: {
-			'Access-Control-Allow-Origin': '*',
-		},
-		proxy: {
-			'/api': {
-				//本地服务接口地址
-				target: 'http://192.168.1.100/api',
-				//远程演示服务地址,可用于直接启动项目
-				//target: 'https://saber.bladex.vip/api',
-				ws: true,
-				pathRewrite: {
-					'^/api': '/'
-				}
-			}
-		}
-	},
-	// 自定义webpack配置
-	configureWebpack: {
-		output: {
-			library: `${packageName}-[name]`,
-			libraryTarget: 'umd',
-			jsonpFunction: `webpackJsonp_${packageName}`,
-		}
-	},
+  // 	忽略的打包文件
+  // 	config.externals({
+  // 		'vue': 'Vue',
+  // 		'vue-router': 'VueRouter',
+  // 		'vuex': 'Vuex',
+  // 		'axios': 'axios',
+  // 		'element-ui': 'ELEMENT',
+  // 	});
+  // 	const entry = config.entry('app');
+  // 	entry.add('babel-polyfill').end();
+  // 	entry.add('classlist-polyfill').end();
+  // 	entry.add('@/mock').end();
+  // },
+  css: {
+    extract: { ignoreOrder: true },
+  },
+  //开发模式反向代理配置，生产模式请使用Nginx部署并配置反向代理
+  devServer: {
+    port: 1777,
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
+    proxy: {
+      "/api": {
+        //本地服务接口地址
+        target: "http://192.168.1.100/api",
+        //远程演示服务地址,可用于直接启动项目
+        //target: 'https://saber.bladex.vip/api',
+        ws: true,
+        pathRewrite: {
+          "^/api": "/",
+        },
+      },
+    },
+  },
+  // 自定义webpack配置
+  configureWebpack: {
+    output: {
+      library: `${packageName}-[name]`,
+      libraryTarget: "umd",
+      jsonpFunction: `webpackJsonp_${packageName}`,
+    },
+  },
 };