+++1.9

src/api/login.js

@@ -1,4 +1,5 @@
 import request from '@/utils/request'
+import axios from 'axios'
 /**
  * @param parameter
  * @returns {*}
@@ -19,3 +20,16 @@ export function getSmsCaptcha(parameter) {
     data: parameter
   })
 }
+
+// mock
+export function getToken(parameter) {
+  return request({
+    url: '/api/info',
+    method: 'get',
+    data: parameter
+  })
+}
+// mock
+export function getTokenil(parameter) {
+  return axios.get('/api/info')
+}

src/assets/css/global.css

@@ -18,4 +18,290 @@ body,
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
+}
+
+.same_row_in {
+	display: flex;
+	align-items: center;
+}
+
+.el-table th.el-table__cell {
+	background: rgba(2, 59, 115, 1);
+}
+
+.el-table thead {
+	color: #fff;
+}
+
+/*最外层透明*/
+.el-table,
+.el-table__expanded-cell {
+	background-color: transparent;
+	color: #05b3d3
+}
+
+/* 表格内背景颜色 */
+.el-table th,
+.el-table tr,
+.el-table td {
+	background-color: transparent;
+	border-color: #21606e;
+}
+
+.el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+	border-bottom: 1px solid #0171b9;
+}
+
+.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
+	background: rgba(255, 255, 255, 0.5);
+	color: #fff;
+}
+
+.el-button {
+	color: #fff !important;
+	background: transparent;
+}
+
+.el-button--default:hover {
+	color: #409eff !important;
+}
+
+.el-button--primary {
+	background-color: rgba(102, 177, 255, 0.5) !important;
+}
+
+.el-button--primary:hover {
+	background-color: rgba(102, 177, 255, 1) !important;
+}
+
+.el-button--danger {
+	border-color: rgba(245, 108, 108, 1) !important;
+	background-color: rgba(245, 108, 108, 0.5) !important;
+}
+
+.el-button--danger:hover {
+	background-color: rgba(245, 108, 108, 1) !important;
+}
+
+.el-table--border::after,
+.el-table--group::after,
+.el-table::before {
+	content: '';
+	background-color: transparent !important;
+}
+
+.el-table__fixed-right::before {
+	background-color: unset !important;
+}
+
+.el-table__fixed-right {
+	box-shadow: 0 0 10px rgba(219, 239, 253, .2) !important;
+}
+
+.el-select {
+	width: 100% !important;
+}
+
+.el-date-editor {
+	width: 100% !important;
+}
+
+.el-select-dropdown {
+	background-color: rgba(2, 59, 115, .8) !important;
+	border: 1px solid #409EFF !important;
+}
+
+.el-select-dropdown__item {
+	color: #fff !important;
+}
+
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+	background-color: rgba(64, 158, 255, .5) !important;
+}
+
+.el-select-dropdown[x-placement^=bottom] .popper__arrow {
+	border-bottom-color: #409EFF !important;
+}
+
+.el-select-dropdown[x-placement^=bottom] .popper__arrow::after {
+	border-bottom-color: rgba(2, 59, 115, .9) !important;
+}
+
+.el-cascader {
+	width: 100% !important;
+}
+
+.el-cascader__dropdown {
+	background-color: rgba(2, 59, 115, .8) !important;
+	border: 1px solid #409EFF !important;
+}
+
+.el-cascader__dropdown .popper__arrow {
+	border-bottom-color: #409EFF !important;
+}
+
+.el-cascader-menu {
+	color: #fff !important;
+	border-right: 1px solid #409EFF !important;
+}
+
+.el-cascader__dropdown .popper__arrow::after {
+	border-bottom-color: rgba(2, 59, 115, .9) !important;
+}
+
+.el-cascader-node.hover,
+.el-cascader-node:hover {
+	background-color: rgba(64, 158, 255, .5) !important;
+}
+.el-cascader-node:not(.is-disabled):focus{
+	background-color: rgba(64, 158, 255, .5) !important;
+}
+.el-pagination__total,
+.el-pagination__jump {
+	color: #fff;
+}
+
+.paging_bottom {
+	display: flex;
+	justify-content: flex-end;
+}
+
+.el-pager .number,
+.el-pager .el-icon {
+	min-width: auto;
+	padding: 0 8px;
+	margin-right: 10px;
+	background-color: transparent;
+	color: #666;
+
+	&.active {
+		border-radius: 5px;
+		background-color: rgba(64, 158, 255, .7);
+		color: white;
+	}
+}
+
+.el-pager .number:last-child {
+	margin-right: 0;
+}
+
+.el-dialog__header {
+	border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
+}
+
+.el-dialog__footer {
+	border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
+}
+
+.el-dialog {
+	background: rgba(2, 69, 115, .9) !important;
+}
+
+.el-dialog__body,
+.el-dialog__title,
+.el-dialog__header,
+.el-form-item__label {
+	color: #fff !important;
+}
+
+.el-input__inner {
+	background-color: rgba(2, 59, 115, .8) !important;
+	padding: 0 15px !important;
+	font-size: 14px !important;
+	border-radius: 4px !important;
+	color: #fff !important;
+	border: 1px solid rgba(255, 255, 255, .2) !important;
+}
+
+.el-input__inner:hover {
+	border: 1px solid #07c0e0 !important;
+}
+
+.el-input__inner:focus {
+	border: 1px solid #07c0e0 !important;
+}
+
+.el-input--prefix .el-input__inner {
+	padding-left: 30px !important;
+}
+
+.el-input.is-disabled .el-input__inner {
+	border: 1px solid rgba(255, 255, 255, .2) !important;
+	background-color: rgba(2, 59, 115, .9) !important;
+}
+
+.el-textarea__inner {
+	color: #fff !important;
+	background-color: #023b73 !important;
+	border: 1px solid rgba(255, 255, 255, .2) !important;
+}
+
+.el-textarea__inner:hover {
+	border: 1px solid #07c0e0 !important;
+}
+
+.el-radio {
+	color: #fff !important;
+}
+
+.el-divider {
+	background-color: rgba(255, 255, 255, 0.2) !important;
+}
+
+.bottom_zero {
+	margin-bottom: 0px !important;
+}
+
+.el-breadcrumb__inner.is-link {
+	color: #fff !important;
+}
+
+.el-breadcrumb__inner {
+	color: #C0C4CC !important;
+}
+
+.el-tree {
+	background: unset !important;
+	color: #fff !important;
+}
+
+.el-tree-node:focus>.el-tree-node__content {
+	background-color: rgba(64, 158, 255, 0.5) !important;
+}
+
+.el-tree-node__content:hover {
+	background-color: rgba(64, 158, 255, 0.5) !important;
+}
+
+.el-pagination__editor {
+	padding: 0px 5px !important;
+}
+
+.avatar-uploader .el-upload {
+	border: 1px solid #d9d9d9;
+	border-radius: 6px;
+	cursor: pointer;
+	position: relative;
+	overflow: hidden;
+}
+
+.avatar-uploader .el-upload:hover {
+	border-color: #409EFF;
+}
+
+.avatar-uploader-icon {
+	font-size: 28px;
+	color: #8c939d;
+	width: 140px;
+	height: 140px;
+	line-height: 140px;
+	text-align: center;
+}
+
+.avatar {
+	width: 140px;
+	height: 140px;
+	display: block;
 }

src/assets/js/announcements.js

@@ -0,0 +1,91 @@
+export const check = () => {
+  return [{
+    id: 'ITEM_1',
+    label: '是否违规在地下室、卫生间或密闭的房间内存放使用瓶装液化气。',
+    value: '0',
+  },{
+    id: 'ITEM_2',
+    label: '液化气瓶、炉具使用或气瓶存放的房间内是否违反规定安床住人。',
+    value: '0',
+  },{
+    id: 'ITEM_3',
+    label: '液化气瓶、炉具使用或存放的房间上方是否搭建阁楼。',
+    value: '',
+  },{
+    id: 'ITEM_4',
+    label: '液化气瓶、炉具使用或存放的房间内通风是否良好及加装换气装置。',
+    value: '',
+  },{
+    id: 'ITEM_5',
+    label: '液化气瓶、炉具使用或存放的场所是否配备灭火器。',
+    value: '',
+  },{
+    id: 'ITEM_6',
+    label: '液化气瓶存放间内是否按照国家规范安装燃气浓度报警仪装置。',
+    value: '',
+  },{
+    id: 'ITEM_7',
+    label: '液化气瓶、炉具使用或存放处是否堆放易燃物及其它杂物。',
+    value: '',
+  },{
+    id: 'ITEM_8',
+    label: '液化气瓶、炉具、软管是否放在不易碰撞且易操作检查的地方。',
+    value: '',
+  },{
+    id: 'ITEM_9',
+    label: '液化气瓶是否摆放在密闭狭小的橱柜内使用。',
+    value: '',
+  },{
+    id: 'ITEM_10',
+    label: '液化气炉具下方是否密闭及不具备通风条件。',
+    value: '',
+  },{
+    id: 'ITEM_11',
+    label: '液化气瓶是否完好有效、开关是否正常无泄漏。',
+    value: '',
+  },{
+    id: 'ITEM_12',
+    label: '燃气炉具工作性能正常，无破损、无泄漏，且开关完好正常。',
+    value: '',
+  },{
+    id: 'ITEM_13',
+    label: '减压阀是否功能完好无破损，且安装到位无松动、无异常、无泄漏。',
+    value: '',
+  },{
+    id: 'ITEM_14',
+    label: '连接软管是否完好无老化、龟裂、鼓包、破损、泄漏等现象。',
+    value: '',
+  },{
+    id: 'ITEM_15',
+    label: '软管与炉具、减压阀连接处是否安装到位且卡子紧固无松动、无泄漏。',
+    value: '',
+  },{
+    id: 'ITEM_16',
+    label: '连接软管有无加装三通、套管、穿墙或铺设顶棚、埋地等不易检查处。',
+    value: '',
+  },{
+    id: 'ITEM_17',
+    label: '连接软管是否放置炉具底部靠近明火、高温或电源线路及电器处。',
+    value: '',
+  },{
+    id: 'ITEM_18',
+    label: '气瓶护罩及气瓶周围是否堆放或悬挂杂物。',
+    value: '',
+  },{
+    id: 'ITEM_19',
+    label: '气瓶是否与炉具、高温物体保持一定的安全间距。',
+    value: '',
+  },{
+    id: 'ITEM_20',
+    label: '燃气热水器是否放置在卫生间或其它密闭不通风的房间内使用。',
+    value: '',
+  },{
+    id: 'ITEM_21',
+    label: '燃气热水器或汤锅桶是否安装排烟管将废气引出室外。',
+    value: '',
+  },{
+    id: 'ITEM_22',
+    label: '是否明确专人负责具体操作及日常安全巡查管理。',
+    value: '',
+  },]
+}

src/assets/js/districtCode.js

@@ -0,0 +1,366 @@
+export const urbanArea = () => {
+  return [{
+    value: '520100',
+    label: '贵阳市',
+    children: [{
+      value: '520101',
+      label: '高新区',
+    }, {
+      value: '520102',
+      label: '南明区',
+    }, {
+      value: '520103',
+      label: '云岩区',
+    }, {
+      value: '520111',
+      label: '花溪区',
+    }, {
+      value: '520112',
+      label: '乌当区',
+    }, {
+      value: '520113',
+      label: '白云区',
+    }, {
+      value: '520114',
+      label: '国家经济技术开发区',
+    }, {
+      value: '520115',
+      label: '观山湖区',
+    }, {
+      value: '520121',
+      label: '开阳县',
+    }, {
+      value: '520122',
+      label: '息烽县',
+    }, {
+      value: '520123',
+      label: '修文县',
+    }, {
+      value: '520181',
+      label: '清镇市',
+    }, ]
+  }, {
+    value: '520200',
+    label: '六盘水市',
+    children: [{
+      value: '520201',
+      label: '钟山区',
+    }, {
+      value: '520203',
+      label: '六枝特区',
+    }, {
+      value: '520221',
+      label: '水城区',
+    }, {
+      value: '520222',
+      label: '盘县',
+    }, {
+      value: '520223',
+      label: '钟山经济开发区',
+    }, {
+      value: '520224',
+      label: '红果经济开发区',
+    }]
+  }, {
+    value: '520300',
+    label: '遵义市',
+    children: [{
+      value: '520301',
+      label: '汇川区',
+    }, {
+      value: '520302',
+      label: '红花岗区',
+    }, {
+      value: '520321',
+      label: '播州区',
+    }, {
+      value: '520322',
+      label: '桐梓县',
+    }, {
+      value: '520323',
+      label: '绥阳县',
+    }, {
+      value: '520324',
+      label: '正安县',
+    }, {
+      value: '520325',
+      label: '道真县',
+    }, {
+      value: '520326',
+      label: '务川县',
+    }, {
+      value: '520327',
+      label: '凤冈县',
+    }, {
+      value: '520328',
+      label: '湄潭县',
+    }, {
+      value: '520329',
+      label: '余庆县',
+    }, {
+      value: '520330',
+      label: '习水县',
+    }, {
+      value: '520331',
+      label: '遵义国家经济技术开发区',
+    }, {
+      value: '520332',
+      label: '新蒲新区',
+    }, {
+      value: '520333',
+      label: '南部新区',
+    }, {
+      value: '520381',
+      label: '赤水市',
+    }, {
+      value: '520382',
+      label: '仁怀市',
+    }]
+  }, {
+    value: '520400',
+    label: '安顺市',
+    children: [{
+      value: '520201',
+      label: '安顺经济开发区',
+    }, {
+      value: '520402',
+      label: '西秀区',
+    }, {
+      value: '520421',
+      label: '平坝区',
+    }, {
+      value: '520422',
+      label: '普定县',
+    }, {
+      value: '520423',
+      label: '镇宁县',
+    }, {
+      value: '520424',
+      label: '关岭县',
+    }, {
+      value: '520425',
+      label: '紫云县',
+    }, {
+      value: '520427',
+      label: '黄果树风景名胜区',
+    }, {
+      value: '520428',
+      label: '龙宫风景区',
+    }]
+  }, {
+    value: '522200',
+    label: '铜仁市',
+    children: [{
+      value: '520626',
+      label: '德江县',
+    }, {
+      value: '522201',
+      label: '碧江区',
+    }, {
+      value: '522222',
+      label: '江口县',
+    }, {
+      value: '522223',
+      label: '玉屏县',
+    }, {
+      value: '522224',
+      label: '石阡县',
+    }, {
+      value: '522225',
+      label: '思南县',
+    }, {
+      value: '522226',
+      label: '印江县',
+    }, {
+      value: '522228',
+      label: '沿河县',
+    }, {
+      value: '522229',
+      label: '松桃县',
+    }, {
+      value: '522230',
+      label: '万山区',
+    }, {
+      value: '522231',
+      label: '大龙开发区',
+    }, {
+      value: '522232',
+      label: '铜仁高新区',
+    }]
+  }, {
+    value: '522300',
+    label: '黔西南州',
+    children: [{
+      value: '522301',
+      label: '兴义市',
+    }, {
+      value: '522322',
+      label: '兴仁市',
+    }, {
+      value: '522323',
+      label: '普安县',
+    }, {
+      value: '522324',
+      label: '晴隆县',
+    }, {
+      value: '522325',
+      label: '贞丰县',
+    }, {
+      value: '522326',
+      label: '望谟县',
+    }, {
+      value: '522327',
+      label: '册亨县',
+    }, {
+      value: '522328',
+      label: '安龙县',
+    }, {
+      value: '522329',
+      label: '顶效经济开发区',
+    }]
+  }, {
+    value: '522400',
+    label: '毕节市',
+    children: [{
+      value: '522401',
+      label: '七星关区',
+    }, {
+      value: '522422',
+      label: '大方县',
+    }, {
+      value: '522423',
+      label: '黔西县',
+    }, {
+      value: '522424',
+      label: '金沙县',
+    }, {
+      value: '522425',
+      label: '织金县',
+    }, {
+      value: '522426',
+      label: '纳雍县',
+    }, {
+      value: '522428',
+      label: '赫章县',
+    }, {
+      value: '522429',
+      label: '百里杜鹃风景名胜区',
+    }, {
+      value: '522431',
+      label: '金海湖新区',
+    }]
+  }, {
+    value: '522400',
+    label: '黔东南州',
+    children: [{
+      value: '522601',
+      label: '凯里市',
+    }, {
+      value: '522622',
+      label: '黄平县',
+    }, {
+      value: '522623',
+      label: '施秉县',
+    }, {
+      value: '522624',
+      label: '三穗县',
+    }, {
+      value: '522625',
+      label: '镇远县',
+    }, {
+      value: '522626',
+      label: '岑巩县',
+    }, {
+      value: '522627',
+      label: '天柱县',
+    }, {
+      value: '522628',
+      label: '锦屏县',
+    }, {
+      value: '522629',
+      label: '剑河县',
+    }, {
+      value: '522630',
+      label: '台江县',
+    }, {
+      value: '522631',
+      label: '黎平县',
+    }, {
+      value: '522632',
+      label: '榕江县',
+    }, {
+      value: '522633',
+      label: '从江县',
+    }, {
+      value: '522634',
+      label: '雷山县',
+    }, {
+      value: '522635',
+      label: '麻江县',
+    }, {
+      value: '522636',
+      label: '丹寨县',
+    }, {
+      value: '522637',
+      label: '凯里经济开发区',
+    }]
+  }, {
+    value: '522700',
+    label: '黔南州',
+    children: [{
+      value: '522701',
+      label: '都匀市',
+    }, {
+      value: '522702',
+      label: '福泉市',
+    }, {
+      value: '522722',
+      label: '荔波县',
+    }, {
+      value: '522723',
+      label: '贵定县',
+    }, {
+      value: '522725',
+      label: '瓮安县',
+    }, {
+      value: '522726',
+      label: '独山县',
+    }, {
+      value: '522727',
+      label: '平塘县',
+    }, {
+      value: '522728',
+      label: '罗甸县',
+    }, {
+      value: '522729',
+      label: '长顺县',
+    }, {
+      value: '522730',
+      label: '龙里县',
+    }, {
+      value: '522731',
+      label: '惠水县',
+    }, {
+      value: '522732',
+      label: '三都县',
+    }, {
+      value: '522733',
+      label: '都匀经济开发区',
+    }]
+  }, {
+    value: '522801',
+    label: '党武',
+  }, {
+    value: '522802',
+    label: '湖潮',
+  }, {
+    value: '522803',
+    label: '马场',
+  }, {
+    value: '522804',
+    label: '高峰',
+  }, {
+    value: '524027',
+    label: '威宁彝族回族苗族自治县',
+  }]
+}

src/components/actionBar.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <div class="card_action_bar">
+      <div>
+        <div class="action_bar_headline" :class="formList.length>0?'margin_5x':''">{{menuTitle}}</div>
+        <el-form :model="ruleForm" ref="ruleForm" label-width="100" class="el-row demo-ruleForm"
+          :label-position="labelPosition">
+          <div style="display: flex;">
+            <el-form-item style="display: flex;margin-right: 10px;" class="bottom_zero" v-for="(item, index) in formList"
+              :key="index" :label="item.label" :prop="item.field" :class="item.colWidth">
+              <!-- 输入框 -->
+              <template v-if="item.type === 'input'">
+                <div class="forms_dom">
+                  <el-input autocomplete="new-password" :placeholder="item.placeholder" :disabled="item.disabled"
+                    :id="item.field" :show-password="item.mold ? true : false" v-model="ruleForm[`${item.field}`]" />
+                </div>
+              </template>
+              <!-- 下拉框 -->
+              <template v-if="item.type === 'select'">
+                <el-select :id="item.field" class="forms_dom" v-model="ruleForm[`${item.field}`]"
+                  :placeholder="item.placeholder" :disabled="item.disabled" :multiple="item.multiple"
+                  style="width: 100%" @change="changeSelect">
+                  <el-option v-for="(element, i) in item.options" :label="element.label" :value="`${element.value}`"
+                    :key="i" />
+                </el-select>
+              </template>
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+      <div class="same_row_in" v-if="operateList.length > 0">
+        <div v-for="(item1,index) in operateList" :key="index">
+          <el-button type="primary" size="small" :icon="item1.icon"
+            @click="openModel(item1.type)">{{item1.title}}</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      menuTitle: {
+        type: String,
+        default: () => '',
+      },
+      operateList: {
+        type: Array,
+        default: () => [],
+      },
+      formList: {
+        type: Array,
+        default: () => [],
+      },
+      labelPosition: {
+        type: String,
+        default: () => "right",
+      },
+    },
+    data() {
+      return {
+        ruleForm: {}
+      }
+    },
+    methods: {
+      openModel(type) {
+        this.$emit('openModel', type)
+      },
+      // 搜索输入框
+      searchProtocol() {
+
+      },
+      changeSelect() {
+
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .card_action_bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    background-color: rgba(255, 255, 255, 0.2);
+    padding: 10px 20px;
+  }
+
+  .action_bar_headline {
+    color: #fff;
+    font-size: 18px;
+  }
+
+  .margin_5x {
+    margin-bottom: 10px;
+  }
+</style>

src/components/formEmployee.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="card_employee">
+    <el-form ref="form" :model="form" label-width="100px">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="登录账号">
+            <el-input v-model="form.name" placeholder="请输入登录账号"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="密码">
+            <el-input v-model="form.name" placeholder="请输入密码"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item class="bottom_zero" label="权限">
+            <el-select v-model="form.region" placeholder="请选择权限">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12"></el-col>
+        <el-col :span="24">
+          <el-divider></el-divider>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="姓名">
+            <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="身份证号">
+            <el-input v-model="form.name" placeholder="请输入身份证号"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="工号">
+            <el-input v-model="form.name" placeholder="请输入工号"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="联系电话">
+            <el-input v-model="form.name" placeholder="请输入联系电话"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="类型">
+            <el-select v-model="form.emptype" placeholder="请选择类型">
+              <el-option v-for="item in employeeType" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item>
+            <el-radio-group v-model="form.resource">
+              <el-radio label="送气员"></el-radio>
+              <el-radio label="库管"></el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="聘用状态">
+            <el-input v-model="form.name" placeholder="聘用状态"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="聘用日期">
+            <el-date-picker v-model="form.name" type="date" placeholder="选择日期">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="教育程度">
+            <el-input v-model="form.name" placeholder="教育程度"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="岗位类别">
+            <el-input v-model="form.name" placeholder="岗位类别"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="描述">
+            <el-input type="textarea" v-model="form.desc" placeholder="请输入描述"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <div>《燃气从业资格证》/《道路运输从业人员从业资格证》信息</div>
+          <el-divider></el-divider>
+        </el-col>
+      </el-row>
+      <el-row v-if="form.emptype === '3' || form.emptype === '4'">
+        <el-col :span="24" v-if="form.emptype === '3'">
+          <div class="title_binding">绑定《燃气从业资格证》</div>
+        </el-col>
+        <el-col :span="24" v-else>
+          <div class="title_binding">绑定《道路运输从业人员从业资格证》</div>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="证书编号">
+            <el-input v-model="form.name" placeholder="请输入证书编号"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="类型">
+            <el-select v-model="form.region" placeholder="请选择类型">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="发布机关">
+            <el-input v-model="form.name" placeholder="发布机关"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="发证时间">
+            <el-date-picker v-model="form.name" type="date" placeholder="选择日期">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" v-if="form.emptype === '4'">
+          <el-form-item label="首次发证时间">
+            <el-date-picker v-model="form.name" type="date" placeholder="选择日期">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" v-if="form.emptype === '4'">
+          <el-form-item label="有效期">
+            <el-date-picker v-model="form.name" type="date" placeholder="选择日期">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="备注">
+            <el-input type="textarea" v-model="form.desc" placeholder="请输入备注内容"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item class="card_fuel_gas" label="燃气从业资格证">
+            <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
+              :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
+              <img v-if="imageUrl" :src="imageUrl" class="avatar">
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'formEmployee',
+    data() {
+      return {
+        form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: '',
+          emptype: '',
+        },
+        employeeType: [{
+          value: '3',
+          label: '门店人员'
+        }, {
+          value: '4',
+          label: '货车司机'
+        }, {
+          value: '5',
+          label: '重装站人员'
+        }],
+        imageUrl: '',
+      }
+    },
+    methods: {
+      handleAvatarSuccess(res, file) {
+        this.imageUrl = URL.createObjectURL(file.raw);
+      },
+      beforeAvatarUpload(file) {
+        const isJPG = file.type === 'image/jpeg';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+        if (!isJPG) {
+          this.$message.error('上传头像图片只能是 JPG 格式!');
+        }
+        if (!isLt2M) {
+          this.$message.error('上传头像图片大小不能超过 2MB!');
+        }
+        return isJPG && isLt2M;
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .card_employee {
+    max-height: 550px;
+    overflow-y: scroll;
+    padding-right: 5px;
+  }
+
+  .title_binding {
+    font-size: 18px;
+    margin-bottom: 20px;
+  }
+
+  .card_fuel_gas .el-form-item__label {
+    width: 120px !important;
+  }
+</style>

src/components/formShop.vue

@@ -0,0 +1,208 @@
+<template>
+  <!-- 门店表单 -->
+  <div class="card_employee">
+    <el-form ref="form" :model="form" label-width="100px">
+      <el-row>
+        <el-col :span="24">
+          <div>基本信息</div>
+          <el-divider></el-divider>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="社会信用代码">
+            <el-input v-model="form.name" placeholder="请输入社会信用代码"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="门店名称">
+            <el-input v-model="form.name" placeholder="请输入门店名称"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="联系人">
+            <el-input v-model="form.name" placeholder="请输入联系人"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="联系人电话">
+            <el-input v-model="form.name" placeholder="请输入联系人电话"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="所在地市">
+            <el-select v-model="form.region" placeholder="请选择城市">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="所在区/县">
+            <el-select v-model="form.region" placeholder="请选择所在区/县">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="地址">
+            <el-input v-model="form.name" placeholder="请输入地址"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="描述">
+            <el-input type="textarea" v-model="form.desc" placeholder="请输入描述"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <div>《燃气经营许可证》信息</div>
+          <el-divider></el-divider>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="许可证编号">
+            <el-input v-model="form.name" placeholder="请输入许可证编号"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="经营类型">
+            <el-select v-model="form.emptype" placeholder="请选择类型">
+              <el-option v-for="item in employeeType" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="经营区域">
+            <el-input v-model="form.name" placeholder="请输入经营区域"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="法人名称">
+            <el-input v-model="form.name" placeholder="请输入法人名称"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="发证部门">
+            <el-input v-model="form.name" placeholder="请输入发证部门"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="发证时间">
+            <el-date-picker v-model="form.name" type="date" placeholder="选择发证时间">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="开始时间">
+            <el-date-picker v-model="form.name" type="date" placeholder="选择开始时间">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="证件有效期">
+            <el-date-picker v-model="form.name" type="date" placeholder="选择证件有效期">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <div>附件</div>
+          <el-divider></el-divider>
+        </el-col>
+        <el-col :span="24">
+          <div class="card_purple">
+            <el-form-item class="card_fuel_gas margin-l-50" label="营业执照">
+              <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
+                :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
+                <img v-if="imageUrl" :src="imageUrl" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
+            </el-form-item>
+            <el-form-item class="card_fuel_gas" label="燃气从业资格证">
+              <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
+                :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
+                <img v-if="imageUrl" :src="imageUrl" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'formShop',
+    data() {
+      return {
+        form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: '',
+          emptype: '',
+        },
+        employeeType: [{
+          value: '3',
+          label: '门店人员'
+        }, {
+          value: '4',
+          label: '货车司机'
+        }, {
+          value: '5',
+          label: '重装站人员'
+        }],
+        imageUrl: '',
+      }
+    },
+    methods: {
+      handleAvatarSuccess(res, file) {
+        this.imageUrl = URL.createObjectURL(file.raw);
+      },
+      beforeAvatarUpload(file) {
+        const isJPG = file.type === 'image/jpeg';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+        if (!isJPG) {
+          this.$message.error('上传头像图片只能是 JPG 格式!');
+        }
+        if (!isLt2M) {
+          this.$message.error('上传头像图片大小不能超过 2MB!');
+        }
+        return isJPG && isLt2M;
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .card_employee {
+    max-height: 550px;
+    overflow-y: scroll;
+    padding-right: 5px;
+    overflow-x: hidden;
+  }
+  .margin-l-50{
+    margin-right: 50px;
+  }
+  .card_fuel_gas {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .card_fuel_gas ::v-deep .el-form-item__label {
+    width: 120px !important;
+    text-align: left;
+    // margin-bottom: 20px;
+  }
+
+  .card_fuel_gas ::v-deep .el-form-item__content {
+    margin-left: 0px !important;
+  }
+  .card_purple{
+    display: flex;
+  }
+</style>

src/components/forms.vue

@@ -0,0 +1,197 @@
+<template>
+  <!-- 表单 -->
+  <div class="card_employee">
+    <el-form ref="ruleForm" :model="ruleForm" :label-width="labelWidth">
+      <el-row>
+        <el-col :span="item.colWidth" v-for="(item, index) in formList" :key="index">
+          <el-form-item :label="item.label" :prop="item.field" :rules="detail ? item.rules : {}"
+            v-if="item.type === 'input'">
+            <el-input :placeholder="item.placeholder" :disabled="item.disabled" :id="item.field"
+              v-model="ruleForm[`${item.field}`]"></el-input>
+          </el-form-item>
+          <el-form-item :label="item.label" :prop="item.field" :rules="detail ? item.rules : {}"
+            v-if="item.type === 'textarea'">
+            <el-input :maxlength="item.maxLenght" type="textarea" :rows="item.rowsHeight" :disabled="item.disabled"
+              :id="item.field" :placeholder="item.placeholder" v-model="ruleForm[`${item.field}`]" />
+          </el-form-item>
+          <el-form-item :label="item.label" :prop="item.field" :rules="detail ? item.rules : {}"
+            v-if="item.type === 'select'">
+            <el-select :id="item.field" v-model="ruleForm[`${item.field}`]" :placeholder="item.placeholder"
+              :disabled="item.disabled" :multiple="item.multiple" style="width: 100%" @change="changeSelect">
+              <el-option v-for="(element, i) in item.options" :label="element.label" :value="`${element.value}`"
+                :key="i" />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="item.label" :prop="item.field" :rules="detail ? item.rules : {}"
+            v-if="item.type === 'cascader'">
+            <el-cascader v-model="ruleForm[`${item.field}`]" :options="item.options" @change="handleChange">
+            </el-cascader>
+          </el-form-item>
+          <el-form-item :label="item.label" :prop="item.field" :rules="detail ? item.rules : {}"
+            v-if="item.type === 'radio'">
+            <el-radio-group v-model="ruleForm[`${item.field}`]">
+              <el-radio v-for="(element, i) in item.options" :key="i" :label="element.label"></el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="item.label" :prop="item.field" :rules="detail ? item.rules : {}"
+            v-if="item.type === 'time'">
+            <el-date-picker type="date" v-model="ruleForm[`${item.field}`]" :placeholder="item.placeholder">
+            </el-date-picker>
+          </el-form-item>
+          <div v-if="item.type === 'divider'">
+            <div v-if="item.label">{{item.label}}</div>
+            <el-divider></el-divider>
+          </div>
+          <div style="height: 10px;width: 100%;" v-if="item.type === 'dividingSlot'"></div>
+          <el-form-item class="card_descriptions" :label="item.label" :prop="item.field"
+            :rules="detail ? item.rules : {}" v-if="item.type === 'descriptions'">
+            <span class="descriptions_title">123
+              <span class="descriptions_badge center_in" v-if="item.field == 'name'">商户</span>
+            </span>
+          </el-form-item>
+          <div v-if="item.type === 'upload'">
+            <div class="card_purple">
+              <el-form-item :class="item.crosswise ? '' : 'card_fuel_gas'" class="margin-l-50" :label="item.label"
+                :prop="item.field" :rules="detail ? item.rules : {}">
+                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
+                  :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
+                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                </el-upload>
+              </el-form-item>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "forms",
+    props: {
+      // 表单tabel数据
+      formNewList: {
+        type: Array,
+        default: () => [],
+      },
+      // 表单label宽度
+      labelWidth: {
+        type: String,
+        default: () => '120px',
+      }
+    },
+    watch: {
+      formNewList: {
+        immediate: true, // 立即触发监听函数
+        handler() {
+          this.formList = this.formNewList;
+        },
+      },
+    },
+    data() {
+      return {
+        detail: true,
+        ruleForm: {},
+        formList: [],
+        imageUrl: '',
+      }
+    },
+    methods: {
+      //下拉框下拉事件
+      changeSelect(row) {
+        // console.log(row);
+        this.$emit("changeSelect", row);
+      },
+      // 城市地区选择
+      handleChange(value) {
+        console.log(value);
+      },
+      handleAvatarSuccess(res, file) {
+        this.imageUrl = URL.createObjectURL(file.raw);
+      },
+      beforeAvatarUpload(file) {
+        const isJPG = file.type === 'image/jpeg';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+        if (!isJPG) {
+          this.$message.error('上传头像图片只能是 JPG 格式!');
+        }
+        if (!isLt2M) {
+          this.$message.error('上传头像图片大小不能超过 2MB!');
+        }
+        return isJPG && isLt2M;
+      },
+      //子组件校验，传递到父组件
+      validateForm() {
+        let flag = null
+        this.$refs['ruleForm'].validate(valid => {
+          if (valid) {
+            flag = true
+          } else {
+            flag = false
+          }
+        })
+        return flag
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .card_employee {
+    max-height: 550px;
+    overflow-y: auto;
+    padding-right: 5px;
+    overflow-x: hidden;
+  }
+
+  .margin-l-50 {
+    margin-right: 50px;
+  }
+
+  .card_fuel_gas {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .card_fuel_gas ::v-deep .el-form-item__label {
+    width: 150px !important;
+    text-align: left;
+    // margin-bottom: 20px;
+  }
+
+  .card_descriptions {
+    margin-bottom: 10px !important;
+  }
+
+  .card_descriptions ::v-deep .el-form-item__label {
+    text-align: left;
+  }
+
+  .card_fuel_gas ::v-deep .el-form-item__content {
+    margin-left: 0px !important;
+  }
+
+  .card_purple {
+    display: flex;
+  }
+
+  .descriptions_title {
+    position: relative;
+  }
+
+  .descriptions_badge {
+    position: absolute;
+    width: fit-content;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    top: -10px;
+    right: -35px;
+    color: #169BD5;
+    font-size: 12px;
+    line-height: 14px;
+    padding: 2px;
+    border: 1px solid #169BD5;
+  }
+</style>

src/components/formsSafety.vue

@@ -0,0 +1,219 @@
+<template>
+  <!-- 入户安全 表单 -->
+  <div class="card_safety">
+    <div class="safety_left" v-if="operationType == 'edit'">
+      <el-form ref="form" :model="form" label-width="70px" label-position="left">
+        <el-form-item class="card_fuel_gas" label="整改后图片">
+          <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
+            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
+            <i class="el-icon-plus"></i>
+          </el-upload>
+          <el-dialog :visible.sync="dialogVisible">
+            <img width="100%" :src="dialogImageUrl" alt="">
+          </el-dialog>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-radio-group v-model="form.resource">
+            <el-radio :label="item.label" v-for="(item,index) in rectificationState" :key="index">{{item.value}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input type="textarea" v-model="form.desc"></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div v-else class="safety_left card_exceed">
+      <div v-for="(item,index) in formRuleList" :key="index">
+        <div class="safety_input_item" v-if="item.type == 'input'">
+          <div class="title_item">{{item.label}}</div>
+          <div class="value_item">{{item.value}}</div>
+        </div>
+        <div class="safety_item" v-else-if="item.type == 'image'">
+          <div class="title_item_img">{{item.label}}</div>
+          <div class="card_image_safety" v-if="item.options.length > 0">
+            <div class="image_item" v-for="(kl,i) in item.options" :key="i">
+              <el-image style="width: 100px; height: 100px" :src="kl" fit="cover"></el-image>
+            </div>
+          </div>
+          <div v-else class="empty">无</div>
+        </div>
+        <div class="safety_input_item" v-else-if="item.type == 'radio'">
+          <div class="title_item">状态</div>
+          <el-radio-group v-model="item.value">
+            <el-radio disabled :label="ty.label" v-for="(ty,index1) in rectificationState"
+              :key="index1">{{ty.value}}</el-radio>
+          </el-radio-group>
+        </div>
+      </div>
+    </div>
+    <div class="safety_right">
+      <span>安全检查项目列表</span>
+      <el-divider></el-divider>
+      <div class="card_safety_checkEntry">
+        <div class="checkEntry_item" v-for="(item1,index1) in checkEntry" :key="index1">
+          <div class="label_title_safety">{{index1 + 1}}、{{item1.label}}</div>
+          <div style="margin-left: 26px;">
+            <el-radio-group v-model="item1.value">
+              <el-radio label="0">合格</el-radio>
+              <el-radio label="1">不合格</el-radio>
+            </el-radio-group>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    check
+  } from '@/assets/js/announcements'
+  export default {
+    name: 'formsSafety',
+    props: {
+      operationType: {
+        type: String,
+        default: () => '',
+      },
+      formRuleList: {
+        type: Array,
+        default: () => [],
+      }
+    },
+    data() {
+      return {
+        dialogImageUrl: '',
+        dialogVisible: false,
+        form: {
+          resource: '',
+          desc: ''
+        },
+        rectificationState: [{
+          label: '0',
+          value: '待整改',
+        }, {
+          label: '1',
+          value: '整改中',
+        }, {
+          label: '2',
+          value: '已整改',
+        }],
+        checkEntry: [],
+      }
+    },
+    mounted() {
+      this.checkEntry = check()
+    },
+    methods: {
+      handleRemove(file, fileList) {
+        console.log(file, fileList);
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  ::v-deep .el-upload--picture-card {
+    width: 120px;
+    height: 120px;
+    line-height: 120px;
+    background-color: unset !important;
+  }
+
+  .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
+    background-color: #409EFF !important;
+  }
+
+  .card_safety {
+    display: flex;
+    margin-left: 20px;
+  }
+
+  .safety_left {
+    width: 40%;
+  }
+
+  .safety_right {
+    width: 60%;
+    padding-left: 20px;
+  }
+
+  .card_fuel_gas {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .card_fuel_gas ::v-deep .el-form-item__label {
+    width: 150px !important;
+    text-align: left;
+    // margin-bottom: 20px;
+  }
+
+  .card_fuel_gas ::v-deep .el-form-item__content {
+    margin-left: 0px !important;
+  }
+
+  .card_safety_checkEntry {
+    max-height: 500px;
+    overflow-y: auto;
+  }
+
+  .label_title_safety {
+    font-size: 16px;
+    margin-bottom: 5px;
+  }
+
+  .checkEntry_item {
+    margin-bottom: 10px;
+  }
+
+  .safety_input_item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 25px;
+  }
+
+  .safety_item {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 20px;
+  }
+
+  .card_exceed {
+    max-height: 580px;
+    overflow-y: auto;
+  }
+
+  .title_item {
+    font-size: 16px;
+    width: 90px;
+  }
+
+  .card_image_safety {
+    margin-top: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+  }
+
+  .image_item {
+    margin-right: 10px;
+  }
+
+  .title_item_img {
+    font-size: 16px;
+  }
+
+  .value_item {
+    color: #7f7f7f;
+  }
+
+  .empty {
+    color: #7f7f7f;
+    margin: 20px 0px;
+  }
+</style>

src/components/pagination.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="card_input">
+    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
+      :page-sizes="pageSizes" :pager-count="pagerCountnum" layout="total, sizes, prev, pager, next,jumper"
+      :total="total">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "pagination",
+    props: {
+      currentPage: {
+        type: Number,
+        default: 1,
+      },
+      total: {
+        type: Number,
+        default: 0,
+      },
+      pagerCountnum: {
+        type: Number,
+        default: 7,
+      },
+      pageSizes: {
+        type: Array,
+        default: () => {
+          return [10, 20, 30, 40]
+        },
+      },
+    },
+    data() {
+      return {
+
+      }
+    },
+    methods: {
+      handleSizeChange(val) {
+        console.log(`每页 ${val} 条`);
+        this.$emit('changeSize', val)
+      },
+      handleCurrentChange(val) {
+        console.log(`当前页: ${val}`);
+        this.$emit('changeCurrent', val)
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  ::v-deep .el-pagination .el-select .el-input .el-input__inner {
+    background-color: rgba(2, 59, 115, .8);
+  }
+
+  ::v-deep .el-pagination__jump .el-input__inner {
+    border: 1px solid rgba(139, 191, 216, .5) !important;
+  }
+
+  .el-pagination {
+    background-color: rgba(2, 59, 115, .5);
+    margin-top: 10px;
+    color: #fff;
+    border: 1px solid rgba(2, 59, 115, .8);
+    padding: 5px 10px;
+    border-radius: 3px;
+  }
+
+  ::v-deep .el-pagination__editor.el-input .el-input__inner {
+    border: 1px solid rgba(139, 191, 216, .5) !important;
+    background-color: unset;
+    color: #fff;
+  }
+
+  ::v-deep .el-pagination .el-select .el-input .el-input__inner {
+    border: 1px solid rgba(139, 191, 216, .5) !important;
+    background-color: unset;
+    color: #fff;
+  }
+
+  ::v-deep .el-pagination button {
+    color: #fff !important;
+    background-color: unset;
+  }
+
+</style>

src/components/tables.vue

@@ -0,0 +1,162 @@
+<template>
+  <!-- tables -->
+  <div class="tables_grid">
+    <el-table class="table-style" :data="tableData" style="width: 100%" :border="border">
+      <template v-for="(item,index) in tableList">
+        <el-table-column :fixed="suspension ? 'right' : false" :label="item.label" :width="item.colWidth" align="center"
+          v-if="item.field == 'action'">
+          <template slot-scope="scope">
+            <div style="display: flex;align-items: center;justify-content: center;">
+              <div v-for="disk in item.labelButton" :key="disk.key" class="btn_table">
+                <el-button :class="disk.modality" :type="disk.style" :icon="disk.icon" size="mini"
+                  @click="buttonData(scope.row,disk.type)">
+                  {{ disk.label }}
+                </el-button>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column :prop="item.field" :label="item.label" :width="item.colWidth" :align="item.align"
+          v-else-if="item.field == 'T_mode'">
+          <template slot-scope="scope">
+            <div class="gateway_title">{{initDictvalue(scope.row.T_mode,detailGateway)}}</div>
+          </template>
+        </el-table-column>
+        <el-table-column type="index" :label="item.label" :align="item.align" v-else-if="item.field == 'index'">
+        </el-table-column>
+        <el-table-column :prop="item.field" :label="item.label" :width="item.colWidth" :align="item.align" v-else>
+        </el-table-column>
+      </template>
+    </el-table>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      // 表格边框
+      border: {
+        type: Boolean,
+        default: () => false,
+      },
+      // 表格数据
+      tableList: {
+        type: Array,
+        default: () => [],
+      },
+      // 表格label数据
+      tableData: {
+        type: Array,
+        default: () => [],
+      },
+      // 网关数据
+      detailGateway: {
+        type: Array,
+        default: () => [],
+      },
+      // 语言数据
+      detailLanguage: {
+        type: Array,
+        default: () => [],
+      },
+      // 是否悬浮
+      suspension: {
+        type: Boolean,
+        default: () => false,
+      }
+    },
+    data() {
+      return {
+
+      }
+    },
+    methods: {
+      // 文字匹配
+      initDictvalue(value, list) {
+        let name = ''
+        list.forEach(item => {
+          if (value === item.Id) {
+            name = item.T_name
+          }
+        })
+        return name
+      },
+      // 操作按钮
+      buttonData(row, type) {
+        this.$emit("buttonData", row, type);
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  ::v-deep .el-table__body .el-table__row.hover-row td {
+    background-color: rgba(255, 255, 255, .2) !important;
+  }
+
+  ::v-deep .el-table--border {
+    border: 1px solid #0171b9;
+    border-right: 1px solid #0171b9
+  }
+
+  ::v-deep .el-table--border .el-table__cell {
+    border: 1px solid #0171b9;
+  }
+
+  .btn_table:nth-of-type(n+2) {
+    margin-left: 10px;
+  }
+
+  .el-button--mini {
+    padding: 5px;
+    border-color: rgba(102, 177, 255, 1);
+    color: #fff;
+  }
+
+  .el-button:focus,
+  .el-button:hover {
+    color: #fff;
+    background: transparent;
+  }
+
+  .deleteBtn {
+    color: #ff6665;
+  }
+
+  .icon_play {
+    font-size: 25px;
+    color: #83FF00;
+  }
+
+  .icon_pause {
+    font-size: 25px;
+    color: #FF9494;
+  }
+
+  .title_play {
+    font-size: 15px;
+    color: #83FF00;
+    margin-left: 10px;
+  }
+
+  .title_pause {
+    font-size: 15px;
+    color: #FF9494;
+    margin-left: 10px;
+  }
+
+  .card_operation {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+
+  .gateway_title {
+    color: #59fe6d;
+  }
+
+  .gateway_title1 {
+    color: #34d9f4;
+  }
+</style>

src/components/treeTable.vue

@@ -0,0 +1,229 @@
+<template>
+  <!-- 树形表格 -->
+  <div class="tree_card">
+    <el-table class="tree_table" :data="tableData" row-key="newId" style="width: 100%;"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+      <template v-for="(item,index) in treeData">
+        <el-table-column :prop="item.field" :label="item.label" :width="item.colWidth" :align="item.align"
+          v-if="item.field == 'T_type'">
+          <template slot-scope="scope">
+            <div>{{initDictvalue(scope.row,attributeTypeList)}}</div>
+          </template>
+        </el-table-column>
+        <el-table-column :prop="item.field" :label="item.label" :width="item.colWidth" :align="item.align"
+          v-else-if="item.field == 'T_read'">
+          <template slot-scope="scope">
+            <div :class="scope.row.T_read ? 'title_blue' : 'title_blue1'">{{scope.row.T_read ? '只读' : '读写'}}</div>
+          </template>
+        </el-table-column>
+        <el-table-column :fixed="suspension ? 'right' : false" :label="item.label" align="center" :width="item.colWidth"
+          v-else-if="item.field == 'action'">
+          <template slot-scope="scope">
+            <div class="btn_tree">
+              <div v-for="disk in item.labelButton" :key="disk.key" class="btn_table">
+                <el-button :class="disk.modality" :type="disk.style" :icon="disk.icon" size="mini"
+                  @click="buttonData(scope.row,disk.type)">
+                  {{ disk.label }}
+                </el-button>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column show-overflow-tooltip :prop="item.field" :label="item.label" :width="item.colWidth"
+          :align="item.align" v-else>
+        </el-table-column>
+      </template>
+    </el-table>
+  </div>
+</template>
+<script>
+  export default {
+    name: "treeTable",
+    props: {
+      btnType: {
+        type: String,
+        default: () => '',
+      },
+      // 表格数据
+      treeDataList: {
+        type: Array,
+        default: () => [],
+      },
+      // 表格label数据
+      treeData: {
+        type: Array,
+        default: () => [],
+      },
+      // 当前值数据
+      presentValue: {
+        type: Object,
+        default: () => {},
+      },
+      // 是否悬浮
+      suspension: {
+        type: Boolean,
+        default: () => false,
+      }
+    },
+    data() {
+      return {
+        tableData: [],
+        attributeTypeList: [{
+            title: 'Number(数值)',
+            id: 1,
+          },
+          {
+            title: 'Text(字符串)',
+            id: 2,
+          },
+          {
+            title: 'Enum(枚举)',
+            id: 3,
+          },
+          {
+            title: 'Bool(布尔值)',
+            id: 4,
+          },
+          {
+            title: 'Time(时间)',
+            id: 8,
+          },
+          {
+            title: 'Object(对象)',
+            id: 10,
+          },
+        ],
+      }
+    },
+    watch: {
+      treeDataList: {
+        deep: true,
+        immediate: true, // 立即触发监听函数
+        handler(newVal, oldVal) {
+          if (newVal) {
+            this.tableData = this.addIdToNodes(newVal)
+          }
+          console.log(this.tableData, 23)
+        },
+      },
+    },
+    methods: {
+      // 文字匹配
+      initDictvalue(value, list) {
+        let name = ''
+        list.forEach(item => {
+          if (value.T_type === item.id) {
+            name = item.title
+          }
+        })
+        return name
+      },
+      // 当前值匹配 根据key查询对象嵌套对象符合的一项
+      initDictpresent(obj, key) {
+        var that = this
+        var arr = searchObject(obj, key)
+        return arr
+
+        function searchObject(obj, key) {
+          for (let prop in obj) {
+            if (typeof obj[prop] === 'object') {
+              const result = searchObject(obj[prop], key);
+              if (result) {
+                return result;
+              }
+            } else if (prop === key) {
+              return obj[prop];
+            }
+          }
+          // console.log(key,obj,6)
+          return null;
+        }
+      },
+      // id生成
+      addIdToNodes(treeData, prefix = "0") {
+        function traverseTree(node, prefix) {
+          node.newId = prefix;
+          if (node.children && node.children.length) {
+            node.children.forEach((childNode, index) => {
+              // 生成子节点的 id
+              const childId = childNode.id + index
+              traverseTree(childNode, childId);
+            });
+          }
+        }
+        treeData.forEach((node, index) => {
+          // 生成根节点的 id
+          const rootNodeId = node.id + index
+          traverseTree(node, rootNodeId);
+        });
+        return treeData
+      },
+      // 操作按钮
+      buttonData(row, type) {
+        this.$emit("buttonData", row, type);
+      },
+    },
+  }
+</script>
+<style scoped lang="scss">
+  ::v-deep .el-table__body .el-table__row.hover-row td {
+    background-color: rgba(255, 255, 255, .2) !important;
+  }
+
+  ::v-deep .el-table--border {
+    border: 1px solid #0171b9;
+    border-right: 1px solid #0171b9
+  }
+
+  ::v-deep .el-table--border .el-table__cell {
+    border: 1px solid #0171b9;
+  }
+  .tree_table {
+    width: 100%;
+    // margin-bottom: 20px;
+  }
+
+  ::v-deep .el-table__expand-icon {
+    color: #fff !important;
+  }
+
+  .btn_tree {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  .icon_tree {
+    cursor: pointer;
+    font-size: 30px;
+    margin: 0px 10px;
+  }
+
+  .el-button--mini {
+    padding: 5px;
+    border-color: rgba(102, 177, 255, 1);
+    color: #fff;
+  }
+
+  .deleteBtn {
+    color: #ff6665;
+  }
+
+  .el-button:focus,
+  .el-button:hover {
+    color: #06d5f5;
+    background: transparent;
+  }
+
+  .title_blue {
+    color: #83FF00;
+  }
+
+  .title_red {
+    color: #FF9494;
+  }
+
+  .title_blue1 {
+    color: #34d9f4;
+  }
+</style>

src/config/router.config.js

@@ -0,0 +1,20 @@
+// eslint-disable-next-line
+// import { UserLayout, BasicLayout, BlankLayout } from '@/layouts'
+
+const RouteView = {
+  name: 'RouteView',
+  render: h => h('router-view')
+}
+/**
+ * 基础路由
+ * @type { *[] }
+ */
+export const constantRouterMap = [{
+    path: '/login',
+    component: () => import( /* webpackChunkName: "user" */ '@/views/user/Login'),
+  },
+  {
+    path: '/404',
+    component: () => import( /* webpackChunkName: "fail" */ '@/views/404')
+  }
+]

src/main.js

@@ -2,17 +2,33 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-import Cookies from "js-cookie";
-import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
-
+import Cookies from "js-cookie"
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
 
+import './mock'
+// import './permission' // permission control
 // 导入全局样式表
 import './assets/css/global.css'
-import "./mock/index.js"
 Vue.config.productionTip = false
 
 Vue.use(ElementUI);
+
+// 使用router.beforeEach注册一个全局前置守卫，对路由进行权限跳转
+router.beforeEach((to, from, next) => {
+  // 未匹配到路由时 跳转到error页面
+  if (0 === to.matched.length) {
+    next('/error');
+    return false;
+  }
+  const T_uuid = Cookies.get('T_uuid')
+  if (!T_uuid && to.path !== '/login') {
+    next('/login');
+  } else {
+    next();
+  }
+});
+
 new Vue({
   router,
   store,

src/mock/index.js

@@ -1,42 +1,164 @@
-const Mock = require("mockjs");
-let data = Mock.mock({
-  "data": [{
-      name: 'Home',
-      tilte: '首页',
-      icon: 'el-icon-s-home',
-      path: '/home',
-      component: 'Home'
+//引入mock.js
+import Mock from 'mockjs'
+
+//查询所有
+Mock.mock('/api/info', 'get', {
+  "status": 200,
+  "arr": [{
+      name: 'system',
+      parentId: 0,
+      id: 1,
+      meta: {
+        title: '系统管理',
+        icon: 'el-icon-message-solid',
+        show: true
+      },
+      component: 'Base',
+      redirect: '/system/transport'
     },
     {
-      name: 'Menu',
-      tilte: '菜单管理',
-      icon: 'el-icon-menu',
-      path: '/menu',
-      component: 'Menu'
+      name: 'transport',
+      parentId: 1,
+      id: 7,
+      meta: {
+        title: '运输企业管理',
+        show: true
+      },
+      component: 'transport'
     },
     {
-      name: 'Department',
-      tilte: '部门管理',
-      icon: 'el-icon-s-help',
-      path: '/department',
-      component: 'Department'
+      name: 'salesStore',
+      parentId: 1,
+      id: 3,
+      meta: {
+        title: '销售门店管理',
+        show: true
+      },
+      component: 'salesStore'
     },
     {
-      name: 'Role',
-      tilte: '角色管理',
-      icon: 'el-icon-user-solid',
-      path: '/role',
-      component: 'Role'
+      name: 'employee',
+      parentId: 1,
+      id: 4,
+      meta: {
+        title: '员工管理',
+        show: true
+      },
+      component: 'employee'
     },
     {
-      name: 'Order',
-      tilte: '订单管理',
-      icon: 'el-icon-s-order',
-      path: '/order',
-      component: 'Order'
+      name: 'jurisdiction',
+      parentId: 1,
+      id: 5,
+      meta: {
+        title: '权限管理',
+        show: true
+      },
+      component: 'jurisdiction'
+    }, {
+      name: 'manufacture',
+      parentId: 0,
+      id: 2,
+      meta: {
+        title: '生产中心',
+        icon: 'el-icon-message-solid',
+        show: true
+      },
+      component: 'Base',
+      redirect: '/manufacture/vehicle'
+    },
+    {
+      name: 'cylinderFile',
+      parentId: 2,
+      id: 16,
+      meta: {
+        title: '钢瓶档案',
+        show: true
+      },
+      component: 'cylinderFile'
+    },
+    {
+      name: 'vehicle',
+      parentId: 2,
+      id: 31,
+      meta: {
+        title: '车辆管理',
+        show: true
+      },
+      component: 'vehicle'
+    }, {
+      name: 'customer',
+      parentId: 0,
+      id: 3,
+      meta: {
+        title: '客户中心',
+        icon: 'el-icon-message-solid',
+        show: true
+      },
+      component: 'Base',
+      redirect: '/customer/agentOrdering'
+    },
+    {
+      name: 'agentOrdering',
+      parentId: 3,
+      id: 12,
+      meta: {
+        title: '坐席下单',
+        show: true
+      },
+      component: 'agentOrdering'
+    },
+    {
+      name: 'orderProcessing',
+      parentId: 3,
+      id: 13,
+      meta: {
+        title: '派单处理',
+        show: true
+      },
+      component: 'orderProcessing'
+    },
+    {
+      name: 'customerFiling',
+      parentId: 3,
+      id: 14,
+      meta: {
+        title: '客户归档',
+        show: true
+      },
+      component: 'customerFiling'
+    },
+    {
+      name: 'entrySecurity',
+      parentId: 3,
+      id: 15,
+      meta: {
+        title: '入户安全',
+        show: true
+      },
+      component: 'entrySecurity'
+    },
+    {
+      name: 'marketing',
+      parentId: 0,
+      id: 6,
+      meta: {
+        title: '销售管理',
+        icon: 'el-icon-message-solid',
+        show: true
+      },
+      component: 'Base',
+      redirect: '/marketing/orderManagement'
+    },
+    {
+      name: 'orderManagement',
+      parentId: 6,
+      id: 17,
+      meta: {
+        title: '订单管理',
+        show: true
+      },
+      component: 'orderManagement'
     },
   ]
 })
-Mock.mock(/login/, 'post', () => { //三个参数。第一个：路径，第二个：请求方式post/get，第三个：回调，返回值
-  return data
-})

src/permission.js

@@ -0,0 +1,75 @@
+import router, { resetRouter } from './router'
+import store from './store'
+import NProgress from 'nprogress' // progress bar
+import Cookies from "js-cookie"
+import {
+  Message
+} from 'element-ui';
+NProgress.configure({ showSpinner: false }) // NProgress Configuration
+
+const allowList = ['login', 'register', 'registerResult'] // no redirect allowList
+const loginRoutePath = '/login'
+const defaultRoutePath = '/index'
+
+router.beforeEach((to, from, next) => {
+  NProgress.start() // start progress bar
+  to.meta && typeof to.meta.title !== 'undefined'
+  /* has token */
+  const token = Cookies.get('T_tokey')
+  if (token) {
+    if (to.path === loginRoutePath) {
+      next({ path: defaultRoutePath })
+      NProgress.done()
+    } else {
+      console.log(store,23532)
+      // check login user.roles is null
+      if (store.getters.roles.length === 0) {
+        // request login userInfo
+        store
+          .dispatch('GetInfo')
+          .then(res => {
+            console.log('res', res)
+            // 根据用户权限信息生成可访问的路由表
+            store.dispatch('GenerateRoutes', { token, ...res }).then(() => {
+              // 动态添加可访问路由表
+              // VueRouter@3.5.0+ New API
+              resetRouter() // 重置路由 防止退出重新登录或者 token 过期后页面未刷新，导致的路由重复添加
+              store.getters.addRouters.forEach(r => {
+                router.addRoute(r)
+              })
+              // 请求带有 redirect 重定向时，登录自动重定向到该地址
+              const redirect = decodeURIComponent(from.query.redirect || to.path)
+              if (to.path === redirect) {
+                // set the replace: true so the navigation will not leave a history record
+                next({ ...to, replace: true })
+              } else {
+                // 跳转到目的路由
+                next({ path: redirect })
+              }
+            })
+          })
+          .catch(() => {
+            Message.error('请求用户信息失败，请重试')
+            // 失败时，获取用户信息失败时，调用登出，来清空历史保留信息
+            store.dispatch('Logout').then(() => {
+              next({ path: loginRoutePath, query: { redirect: to.fullPath } })
+            })
+          })
+      } else {
+        next()
+      }
+    }
+  } else {
+    if (allowList.includes(to.name)) {
+      // 在免登录名单，直接进入
+      next()
+    } else {
+      next({ path: loginRoutePath, query: { redirect: to.fullPath } })
+      NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
+    }
+  }
+})
+
+router.afterEach(() => {
+  NProgress.done() // finish progress bar
+})

src/router/index.js

@@ -1,43 +1,190 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-// 解决路由重复跳转错误
-const routerPush = Router.prototype.push;
-Router.prototype.push = function(location) {
-  return routerPush.call(this, location).catch(err => {})
-};
-Vue.use(Router);
-
-export default new Router({
-  // mode: "history",
-  routes: [{
-      path: '/',
-      redirect: '/index'
-    },
-    {
+import {
+  getTokenil
+} from '@/api/login'
+import store from '@/store'
+import {
+  constantRouterMap
+} from '@/config/router.config'
+
+const originalPush = Router.prototype.push
+Router.prototype.push = function push(location, onResolve, onReject) {
+  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
+  return originalPush.call(this, location).catch(err => err)
+}
+
+Vue.use(Router)
+
+// 前端路由表 (基于动态)
+const constantRouterComponents = {
+  '404': () => import('@/views/404'),
+  Base: () => import('@/views/common/Base'),
+  // 你需要动态引入的页面组件
+  // 系统管理
+  transport: () => import('@/views/system/transport'),
+  salesStore: () => import('@/views/system/salesStore'),
+  employee: () => import('@/views/system/employee'),
+  jurisdiction: () => import('@/views/system/jurisdiction'),
+  // 生产管理
+  vehicle: () => import('@/views/manufacture/vehicle'),
+  cylinderFile: () => import('@/views/manufacture/cylinderFile'),
+  // 客户中心
+  agentOrdering: () => import('@/views/customer/agentOrdering'),
+  orderProcessing: () => import('@/views/customer/orderProcessing'),
+  customerFiling: () => import('@/views/customer/customerFiling'),
+  entrySecurity: () => import('@/views/customer/entrySecurity'),
+  // 销售管理
+  orderManagement: () => import('@/views/marketing/orderManagement')
+}
+
+const notFoundRouter = {
+  path: '*',
+  redirect: '/404',
+  hidden: true
+}
+const createRouter = () =>
+  new Router({
+    mode: 'history',
+    routes: []
+  })
+
+const router = createRouter()
+
+// 定义一个resetRouter 方法，在退出登录后或token过期后 需要重新登录时，调用即可
+export function resetRouter() {
+  const newRouter = createRouter()
+  router.matcher = newRouter.matcher
+}
+// 定义变量接收api的路由数据
+let mRoutes
+
+router.beforeEach(async (to, form, next) => {
+  if (!mRoutes) {
+    let dataList = await getTokenil()
+    let dataArr = dataList.data.arr
+    // 子菜单匹配页面标识路由
+    dataArr.forEach(item => {
+      if (item.parentId != 0) {
+        item.component = item.name
+      }
+    })
+    const menuNav = []
+    const childrenNav = []
+    listToTree(dataArr, childrenNav, 0)
+    const routers = generator(childrenNav)
+    // console.log(routers,655)
+    const routersList = constantRouterMap.concat(routers)
+    router.addRoutes(routersList)
+    router.addRoute(notFoundRouter)
+    router.addRoute({
       path: '/',
-      component: () => import('@/views/common/Base.vue'),
-      meta: {
-        title: '公共部分'
-      },
+      name: 'index',
+      redirect: '/home',
+      component: () => import('@/views/common/Base'),
       children: [{
-        path: '/index',
-        component: () => import('@/views/page/Home.vue'),
-        meta: {
-          title: '首页'
-        }
+        path: '/home',
+        name: 'home',
+        component: () => import('@/views/page/Home'),
       }]
-    },
-    {
-      path: '/login',
-      component: () => import('@/views/Login.vue')
-    },
-    {
-      path: '/error',
-      component: () => import('@/views/Error.vue')
-    },
-    {
-      path: '/404',
-      component: () => import('@/views/404.vue')
-    }
-  ]
+    })
+    mRoutes = routersList
+    // console.log(router.getRoutes(), '打印路由1')
+    // 向仓库发送api的路由数据
+    store.commit('setMenu', childrenNav)
+    next({
+      ...to
+    })
+  } else {
+    // console.log(mRoutes, '打印路由2')
+  }
+  next()
 })
+
+/**
+ * 格式化树形结构数据 生成 vue-router 层级路由表
+ *
+ * @param routerMap
+ * @param parent
+ * @returns {*}
+ */
+export const generator = (routerMap, parent) => {
+  return routerMap.map(item => {
+    const {
+      title,
+      show,
+      hideChildren,
+      hiddenHeaderContent,
+      target,
+      icon
+    } = item.meta || {}
+    const currentRouter = {
+      // 如果路由设置了 path，则作为默认 path，否则 路由地址 动态拼接生成如 /dashboard/workplace
+      path: item.path || `${(parent && parent.path) || ''}/${item.key}`,
+      // 路由名称，建议唯一
+      name: item.name || item.key || '',
+      // 该路由对应页面的 组件 :方案1
+      // 该路由对应页面的 组件 :方案2 (动态加载)
+      component: constantRouterComponents[item.component || item.key] || (() => import(
+        `@/views/${item.component}`)),
+
+      // meta: 页面标题, 菜单图标, 页面权限(供指令权限用，可去掉)
+      meta: {
+        title: title,
+        icon: icon || undefined,
+        // hiddenHeaderContent: hiddenHeaderContent,
+        // target: target,
+        // permission: item.name
+      }
+    }
+    // 是否设置了隐藏菜单
+    if (show === false) {
+      currentRouter.hidden = true
+    }
+    // 是否设置了隐藏子菜单
+    if (hideChildren) {
+      currentRouter.hideChildrenInMenu = true
+    }
+    // 为了防止出现后端返回结果不规范，处理有可能出现拼接出两个 反斜杠
+    if (!currentRouter.path.startsWith('http')) {
+      currentRouter.path = currentRouter.path.replace('//', '/')
+    }
+    // 重定向
+    item.redirect && (currentRouter.redirect = item.redirect)
+    // 是否有子菜单，并递归处理
+    if (item.children && item.children.length > 0) {
+      // Recursion
+      currentRouter.children = generator(item.children, currentRouter)
+    }
+    return currentRouter
+  })
+}
+
+/**
+ * 数组转树形结构
+ * @param list 源数组
+ * @param tree 树
+ * @param parentId 父ID
+ */
+const listToTree = (list, tree, parentId) => {
+  list.forEach(item => {
+    // 判断是否为父级菜单
+    if (item.parentId === parentId) {
+      const child = {
+        ...item,
+        key: item.key || item.name,
+        children: []
+      }
+      // 迭代 list， 找到当前菜单相符合的所有子菜单
+      listToTree(list, child.children, item.id)
+      // 删掉不存在 children 值的属性
+      if (child.children.length <= 0) {
+        delete child.children
+      }
+      // 加入到树中
+      tree.push(child)
+    }
+  })
+}
+
+export default router

src/store/index.js

@@ -1,12 +1,14 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-
+import permission from './modules/async-router'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  state: {},
+  mutations: {},
   getters: {},
   mutations: {},
   actions: {},
-  modules: {}
+  modules: {
+    permission
+  }
 })

src/store/modules/async-router.js

@@ -0,0 +1,24 @@
+/**
+ * 向后端请求用户的菜单，动态生成路由
+ */
+import {
+  constantRouterMap
+} from '@/config/router.config'
+
+const permission = {
+  state: {
+    menu: [],
+  },
+  mutations: {
+    setMenu(state, meun) {
+      state.menu = meun
+    },
+  },
+  getters: {
+    getMenu(state) {
+      return state.menu
+    }
+  },
+}
+
+export default permission

src/utils/request.js

@@ -8,9 +8,9 @@ import Cookies from "js-cookie";
 // 创建 axios 实例
 const request = axios.create({
   // API 请求的默认前缀
-  baseURL: '/API',
+  baseURL: '/api',
   timeout: 6000, // 请求超时时间
-  withCredentials: true,
+  withCredentials: false,
   headers: {
     'Content-Type': 'application/x-www-form-urlencoded',
     'Access-Control-Allow-Origin': '*'

src/views/404.vue

@@ -1,12 +1,253 @@
 <template>
-  <div>404</div>
+  <div style="background:#f0f2f5;margin-top: -20px;height:100%;">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" :src="img_404" alt="404">
+        <img class="pic-404__child left" :src="img_404_cloud" alt="404">
+        <img class="pic-404__child mid" :src="img_404_cloud" alt="404">
+        <img class="pic-404__child right" :src="img_404_cloud" alt="404">
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">OOPS!</div>
+        <div class="bullshit__headline">{{ message }}</div>
+        <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
+        <a href="/" class="bullshit__return-home">返回首页</a>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+  import img_404 from '@/assets/404_images/404.png'
+  import img_404_cloud from '@/assets/404_images/404_cloud.png'
+
   export default {
-    name: '404',
+    name: 'page404',
+    data() {
+      return {
+        img_404,
+        img_404_cloud
+      }
+    },
+    computed: {
+      message() {
+        return '这个页面出小差啦......'
+      }
+    }
   }
 </script>
 
-<style>
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .wscn-http404 {
+    position: relative;
+    width: 1200px;
+    margin: 20px auto 60px;
+    padding: 0 100px;
+    overflow: hidden;
+
+    .pic-404 {
+      position: relative;
+      float: left;
+      width: 600px;
+      padding: 150px 0;
+      overflow: hidden;
+
+      &__parent {
+        width: 100%;
+      }
+
+      &__child {
+        position: absolute;
+
+        &.left {
+          width: 80px;
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+          animation-name: cloudLeft;
+          animation-duration: 2s;
+          animation-timing-function: linear;
+          animation-fill-mode: forwards;
+          animation-delay: 1s;
+        }
+
+        &.mid {
+          width: 46px;
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+          animation-name: cloudMid;
+          animation-duration: 2s;
+          animation-timing-function: linear;
+          animation-fill-mode: forwards;
+          animation-delay: 1.2s;
+        }
+
+        &.right {
+          width: 62px;
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+          animation-name: cloudRight;
+          animation-duration: 2s;
+          animation-timing-function: linear;
+          animation-fill-mode: forwards;
+          animation-delay: 1s;
+        }
+
+        @keyframes cloudLeft {
+          0% {
+            top: 17px;
+            left: 220px;
+            opacity: 0;
+          }
+
+          20% {
+            top: 33px;
+            left: 188px;
+            opacity: 1;
+          }
+
+          80% {
+            top: 81px;
+            left: 92px;
+            opacity: 1;
+          }
+
+          100% {
+            top: 97px;
+            left: 60px;
+            opacity: 0;
+          }
+        }
+
+        @keyframes cloudMid {
+          0% {
+            top: 10px;
+            left: 420px;
+            opacity: 0;
+          }
+
+          20% {
+            top: 40px;
+            left: 360px;
+            opacity: 1;
+          }
+
+          70% {
+            top: 130px;
+            left: 180px;
+            opacity: 1;
+          }
+
+          100% {
+            top: 160px;
+            left: 120px;
+            opacity: 0;
+          }
+        }
+
+        @keyframes cloudRight {
+          0% {
+            top: 100px;
+            left: 500px;
+            opacity: 0;
+          }
+
+          20% {
+            top: 120px;
+            left: 460px;
+            opacity: 1;
+          }
+
+          80% {
+            top: 180px;
+            left: 340px;
+            opacity: 1;
+          }
+
+          100% {
+            top: 200px;
+            left: 300px;
+            opacity: 0;
+          }
+        }
+      }
+    }
+
+    .bullshit {
+      position: relative;
+      float: left;
+      width: 300px;
+      padding: 150px 0;
+      overflow: hidden;
+
+      &__oops {
+        font-size: 32px;
+        font-weight: bold;
+        line-height: 40px;
+        color: #1482f0;
+        opacity: 0;
+        margin-bottom: 20px;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-fill-mode: forwards;
+      }
+
+      &__headline {
+        font-size: 20px;
+        line-height: 24px;
+        color: #1482f0;
+        opacity: 0;
+        margin-bottom: 10px;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.1s;
+        animation-fill-mode: forwards;
+      }
+
+      &__info {
+        font-size: 13px;
+        line-height: 21px;
+        color: grey;
+        opacity: 0;
+        margin-bottom: 30px;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.2s;
+        animation-fill-mode: forwards;
+      }
+
+      &__return-home {
+        display: block;
+        float: left;
+        width: 110px;
+        height: 36px;
+        background: #1482f0;
+        border-radius: 100px;
+        text-align: center;
+        color: #ffffff;
+        opacity: 0;
+        font-size: 14px;
+        line-height: 36px;
+        cursor: pointer;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.3s;
+        animation-fill-mode: forwards;
+      }
+
+      @keyframes slideUp {
+        0% {
+          transform: translateY(60px);
+          opacity: 0;
+        }
+
+        100% {
+          transform: translateY(0);
+          opacity: 1;
+        }
+      }
+    }
+  }
 </style>

src/views/common/Base.vue

@@ -5,25 +5,26 @@
         <el-row>
           <el-col :span="7">
             <div class="topRight">
-              <img class="image_logo" src="../../assets/logo.png" alt="" />
-              <el-divider direction="vertical"></el-divider>
               <topNav></topNav>
+              <div></div>
+              <!-- <el-divider direction="vertical"></el-divider>
+              <img class="image_logo" src="../../assets/logo.png" alt="" /> -->
             </div>
           </el-col>
           <el-col :span="10">
             <div class="titleBox center_in">
-              <span class="title" @click="goIndex">宝智达气瓶管理系统</span>
+              <span class="title" @click="goIndex">宝智达气瓶追溯管理系统</span>
             </div>
           </el-col>
           <el-col :span="7">
             <div class="topLeft">
-              <div class="userLogin">
-                <UserInfo></UserInfo>
-              </div>
-              <el-divider direction="vertical"></el-divider>
               <div class="card_time">
                 <p class="time_title">{{ hourMinuteSecond }}</p>
               </div>
+              <el-divider direction="vertical"></el-divider>
+              <div class="userLogin">
+                <UserInfo></UserInfo>
+              </div>
             </div>
           </el-col>
         </el-row>
@@ -38,7 +39,7 @@
 
 <script>
   import comTags from './Tags.vue';
-  import Bus from './bus';
+  import Bus from './bus.js';
   import UserInfo from './userInfo.vue'
   import topNav from './topNav.vue'
   export default {
@@ -75,7 +76,7 @@
     },
     methods: {
       goIndex() {
-        this.$router.push('/index')
+        this.$router.push('/home')
       },
       formatTime(str, format) {
         let time = new Date(str)
@@ -198,14 +199,11 @@
   }
 
   .main {
-    width: 100%;
+    padding: 0rem 1rem;
+    width: calc(100% - 2rem);
     height: calc(93vh - 10px);
     overflow: auto;
     position: absolute;
-    top: 68px;
-    left: 0;
-    bottom: 30px;
-    padding: 0rem 1rem;
     margin-top: 10px;
   }
 </style>

src/views/common/topNav.vue

@@ -1,24 +1,86 @@
 <template>
-  <div class="card_admin center_in">
-    <div class="title_left">后台管理</div>
+  <div>
+    <div class="card_admin center_in" @click="goMenu">
+      <div class="title_left">后台管理</div>
+      <i class="el-icon-s-fold icon_catalog"></i>
+    </div>
+    <el-drawer direction="ltr" size="300px" :visible.sync="drawer" :with-header="false">
+      <div class="system_head">
+        <img class="system_img" src="../../assets/logo.png" alt="" />
+        <span class="system_title">宝智达气瓶管理系统</span>
+      </div>
+      <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
+        background-color="rgba(2, 69, 115, 0.9)" :unique-opened="true" text-color="#fff" active-text-color="#409EFF">
+        <el-submenu v-for="(item,index) in menus" :index="item.name" :key="index">
+          <template slot="title">
+            <i :class="item.meta.icon" class="menu_icon"></i>
+            <span>{{item.meta.title}}</span>
+          </template>
+          <el-menu-item-group v-for="(it,k) in item.children" :key="k">
+            <router-link class="el-icon-menu" :to="it.path" @click.native="backSkip" tag="el-menu-item">
+              {{it.meta.title}}
+            </router-link>
+          </el-menu-item-group>
+        </el-submenu>
+      </el-menu>
+    </el-drawer>
   </div>
 </template>
 
 <script>
+  import {
+    mapState
+  } from 'vuex'
   export default {
     name: "topNav",
     data() {
-      return {}
+      return {
+        drawer: false,
+        menus: [],
+      }
     },
-    computed: {},
-    created() {}
+    computed: {
+      ...mapState({
+        // 动态主路由
+        mainMenu: state => state.permission.menu
+      })
+    },
+    created() {
+      const mRoutes = this.$store.state.permission.menu;
+      this.menus = getpath(mRoutes, '')
+
+      function getpath(routerMap, parent) {
+        routerMap.map(item => {
+          item.path = `${(parent.path) || ''}/${item.name}`
+          if (item.children && item.children.length > 0) {
+            return getpath(item.children, item)
+          }
+        })
+        return routerMap
+      }
+      // console.log(this.menus, 66)
+    },
+    methods: {
+      goMenu() {
+        this.drawer = true
+      },
+      handleOpen(key, keyPath) {
+        // console.log(key, keyPath);
+      },
+      handleClose(key, keyPath) {
+        // console.log(key, keyPath);
+      },
+      backSkip() {
+        this.drawer = false
+      }
+    }
   }
 </script>
 
 <style scoped lang="scss">
   .card_admin {
     cursor: pointer;
-    width: 100px;
+    width: 130px;
     height: 40px;
     background-color: red;
     background: linear-gradient(to left, #2CD5FF, #2CD5FF) left top no-repeat,
@@ -30,10 +92,27 @@
       linear-gradient(to left, #2CD5FF, #2CD5FF) right bottom no-repeat,
       linear-gradient(to left, #2CD5FF, #2CD5FF) right bottom no-repeat;
     background-size: 2px 15px, 30px 2px, 2px 15px, 30px 2px;
-    border: 2px solid rgba(44,213,255, .1);
+    border: 2px solid rgba(44, 213, 255, .1);
     position: relative;
   }
 
+  ::v-deep .el-drawer {
+    background-color: rgba(2, 69, 115, 0.9) !important;
+    box-shadow: unset !important;
+  }
+
+  ::v-deep .el-menu-item {
+    width: 100%;
+  }
+
+  ::v-deep .el-menu-item:hover {
+    background-color: rgba(64, 158, 255, 0.5) !important;
+  }
+
+  ::v-deep .el-submenu__title:hover {
+    background-color: rgba(64, 158, 255, 0.5) !important;
+  }
+
   .title_left {
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -43,4 +122,35 @@
     font-weight: bold;
     font-family: "Hiragino Sans GB", Arial, sans-serif;
   }
+
+  .icon_catalog {
+    font-size: 20px;
+    margin-left: 4px;
+  }
+
+  .el-menu {
+    border-right: unset !important;
+  }
+
+  .system_head {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+  }
+
+  .system_img {
+    margin-right: 10px;
+    width: 40px;
+  }
+
+  .system_title {
+    font-size: 20px;
+    color: #fff;
+  }
+
+  .menu_icon {
+    color: #fff;
+    font-size: 18px;
+    margin-right: 5px;
+  }
 </style>

src/views/common/userInfo.vue

@@ -5,7 +5,7 @@
     <!-- 用户名下拉菜单 -->
     <el-dropdown @command="handleCommand">
       <span class="el-dropdown-link">
-        {{username}}
+        {{username || 12345678}}
         <i class="el-icon-caret-bottom"></i>
       </span>
       <el-dropdown-menu slot="dropdown">
@@ -40,10 +40,11 @@
 </script>
 
 <style scoped lang="scss">
-  .card_userinfo{
+  .card_userinfo {
     display: flex;
     align-items: center;
   }
+
   .header-portrait {
     width: 28px;
     flex: none;
@@ -55,7 +56,7 @@
     color: white;
     cursor: pointer;
     font-family: system-ui;
-    font-size: 14px;
+    font-size: 20px;
   }
 
   .el-dropdown-menu {
@@ -68,11 +69,16 @@
     }
   }
 
-  ::v-deep .el-dropdown-menu .popper__arrow {
+  .el-dropdown-menu__item:focus,
+  .el-dropdown-menu__item:not(.is-disabled):hover {
+    background: none;
+  }
+
+  ::v-deep .popper__arrow {
     border-bottom-color: #1774c3 !important;
   }
 
-  ::v-deep .el-dropdown-menu .popper__arrow:after {
+  ::v-deep .popper__arrow:after {
     border-bottom-color: #1774c3 !important;
   }
 </style>

src/views/customer/agentOrdering.vue

@@ -0,0 +1,134 @@
+<template>
+  <!-- 坐席下单 -->
+  <div>
+    <actionBar menuTitle="坐席下单" :formList="formList"></actionBar>
+    <tables :key="Math.random()" :suspension="true" :tableList="tableList" :tableData="tableData"
+      @buttonData="buttonData"></tables>
+    <!-- 分页 -->
+    <div class="paging_bottom" v-if="Total">
+      <pagination :total="Total" :currentPage="Pagination.PageIndex" @changeSize="changeSize"
+        @changeCurrent="changeCurrent">
+      </pagination>
+    </div>
+    <el-dialog :title="staffTitle" :visible.sync="staffDialogVisible" width="70%" :close-on-click-modal="false">
+      <div class="card_podia">
+        <div class="seating_form_card">
+          <forms ref="childRules" :formNewList="formRuleList" labelWidth="120px"></forms>
+        </div>
+        <div class="seating_order">
+          <div class="card_seating_order">
+            <span>订单记录</span>
+            <el-divider></el-divider>
+            <div style="display: flex;flex-direction: column;">
+              <div v-for="(item,index) in list" :key="index">
+                {{item}}
+              </div>
+            </div>
+            <div style="margin-top: 50px;">客户用瓶信息</div>
+            <el-divider></el-divider>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button plain @click="staffDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="staffDialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import actionBar from '@/components/actionBar'
+  import tables from '@/components/tables'
+  import pagination from '@/components/pagination'
+  import forms from '@/components/forms'
+  import {
+    formRules,
+    employee
+  } from "./orderTable.js";
+  export default {
+    components: {
+      actionBar,
+      tables,
+      pagination,
+      forms
+    },
+    data() {
+      return {
+        staffTitle: '添加',
+        staffDialogVisible: false,
+        Pagination: {
+          PageIndex: 1,
+          PageSize: 10,
+        },
+        formList: [{
+          type: 'input',
+          label: '订单时间',
+          field: 'T_name',
+          placeholder: '订单时间',
+          colWidth: 'el-col-24',
+        }, {
+          type: 'select',
+          label: '订单状态',
+          field: 'T_name',
+          placeholder: '订单状态',
+          colWidth: 'el-col-24',
+        }, {
+          type: 'input',
+          label: '客户电话',
+          field: 'T_name',
+          placeholder: '客户电话',
+          colWidth: 'el-col-24',
+        }],
+        tableList: employee(),
+        tableData: [{
+          T_name: '2154'
+        }, {
+          T_name: '2154'
+        }, {
+          T_name: '2154'
+        }],
+        Total: 10,
+        formRuleList: [],
+        list: ['2023-12-20 13:00:00  液化气15kg 1瓶', '2023-12-20 13:00:00  液化气15kg 1瓶', '2023-12-20 13:00:00  液化气15kg 1瓶'],
+      }
+    },
+    mounted() {
+      const dataList = formRules();
+      this.formRuleList = dataList;
+    },
+    methods: {
+      buttonData(row, type) {
+        console.log(row, type, 25)
+        if (type == 'logs') {
+          this.staffTitle = '座席下单'
+          this.staffDialogVisible = true
+        }
+      },
+      changeSize(val) {
+        this.Pagination.PageSize = val
+      },
+      changeCurrent(val) {
+        this.Pagination.PageIndex = val
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .card_podia {
+    display: flex;
+  }
+
+  .seating_form_card {
+    width: 70%;
+  }
+
+  .seating_order {
+    width: 30%;
+  }
+
+  .card_seating_order {
+    margin: 0px 20px;
+  }
+</style>

src/views/customer/client.js

@@ -0,0 +1,84 @@
+export const employee = () => {
+  return [{
+    field: 'index',
+    label: '编号',
+    align: 'center',
+  }, {
+    field: 'T_state',
+    operation: true,
+    label: '客户姓名',
+    align: 'center',
+  }, {
+    field: 'T_connect',
+    label: '检查人',
+    align: 'center',
+  }, {
+    field: 'T_connect',
+    label: '检查时间',
+    align: 'center',
+  }, {
+    field: 'T_connect',
+    label: '状态',
+    align: 'center',
+  }, {
+    field: 'action',
+    label: '操作',
+    colWidth: '200px',
+    align: 'center',
+    labelButton: [{
+      type: 'edit',
+      label: '编辑',
+      icon: 'el-icon-edit',
+      style: 'primary',
+    }, {
+      type: 'logs',
+      label: '查看',
+      icon: 'el-icon-tickets',
+      // style: 'primary',
+    }]
+  }]
+}
+
+export const formRules = () => {
+  return [{
+    field: 'T_sn',
+    label: '客户姓名',
+    type: 'input',
+    value: '归属地'
+  }, {
+    field: 'T_sn',
+    label: '检查人',
+    type: 'input',
+    value: '公认为'
+  }, {
+    field: 'T_online',
+    type: 'image',
+    label: '入户检查图片',
+    options: ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg','https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg','https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg','https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg','https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']
+  }, {
+    field: 'T_online',
+    type: 'image',
+    label: '送气员签字图片',
+    options: []
+  }, {
+    field: 'T_online',
+    type: 'image',
+    label: '整改前图片',
+    options: []
+  }, {
+    field: 'T_online',
+    type: 'image',
+    label: '整改后图片',
+    options: []
+  }, {
+    field: 'T_sn',
+    label: '状态',
+    type: 'radio',
+    value: '0'
+  }, {
+    field: 'T_sn',
+    label: '备注',
+    type: 'input',
+    value: ''
+  }]
+}

src/views/customer/customerFiling.vue

@@ -0,0 +1,88 @@
+<template>
+  <!-- 客户归档 -->
+  <div>
+    <actionBar menuTitle="客户归档" :operateList="operateList" @openModel="openModel"></actionBar>
+    <tables :key="Math.random()" :suspension="true" :tableList="tableList" :tableData="tableData"
+      @buttonData="buttonData"></tables>
+    <!-- 分页 -->
+    <div class="paging_bottom" v-if="Total">
+      <pagination :total="Total" :currentPage="Pagination.PageIndex" @changeSize="changeSize"
+        @changeCurrent="changeCurrent">
+      </pagination>
+    </div>
+    <el-dialog :title="staffTitle" :visible.sync="staffDialogVisible" width="60%" :close-on-click-modal="false">
+      <forms ref="childRules" :formNewList="formRuleList" labelWidth="120px"></forms>
+      <span slot="footer" class="dialog-footer">
+        <el-button plain @click="staffDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="staffDialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import actionBar from '@/components/actionBar'
+  import tables from '@/components/tables'
+  import pagination from '@/components/pagination'
+  import forms from '@/components/forms'
+  import {
+    employee,
+    formRules,
+  } from "./pigeonhole.js";
+  export default {
+    components: {
+      actionBar,
+      tables,
+      pagination,
+      forms
+    },
+    data() {
+      return {
+        staffTitle: '添加',
+        staffDialogVisible: false,
+        Pagination: {
+          PageIndex: 1,
+          PageSize: 10,
+        },
+        operateList: [{
+          type: 'add',
+          title: '添加',
+          icon: 'el-icon-plus',
+        }],
+        tableList: employee(),
+        tableData: [{
+          T_name: '2154'
+        }, {
+          T_name: '2154'
+        }, {
+          T_name: '2154'
+        }],
+        Total: 10,
+        formRuleList: [],
+      }
+    },
+    mounted() {
+      const dataList = formRules();
+      this.formRuleList = dataList;
+    },
+    methods: {
+      openModel(type) {
+        console.log(type, 24)
+        if (type == 'add') {
+          this.staffTitle = '添加'
+        }
+        this.staffDialogVisible = true
+      },
+      buttonData(row, type) {},
+      changeSize(val) {
+        this.Pagination.PageSize = val
+      },
+      changeCurrent(val) {
+        this.Pagination.PageIndex = val
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/customer/entrySecurity.vue

@@ -0,0 +1,113 @@
+<template>
+  <!-- 入户安全 -->
+  <div>
+    <actionBar menuTitle="入户安全" :formList="formList"></actionBar>
+    <tables :key="Math.random()" :suspension="false" :tableList="tableList" :tableData="tableData"
+      @buttonData="buttonData"></tables>
+    <!-- 分页 -->
+    <div class="paging_bottom" v-if="Total">
+      <pagination :total="Total" :currentPage="Pagination.PageIndex" @changeSize="changeSize"
+        @changeCurrent="changeCurrent">
+      </pagination>
+    </div>
+    <el-dialog :title="staffTitle" :visible.sync="staffDialogVisible" width="70%" :close-on-click-modal="false">
+      <forms-safety :operationType="operationType" :formRuleList="formRuleList"></forms-safety>
+      <span slot="footer" class="dialog-footer">
+        <el-button plain @click="staffDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="staffDialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import actionBar from '@/components/actionBar'
+  import tables from '@/components/tables'
+  import pagination from '@/components/pagination'
+  import formsSafety from '@/components/formsSafety'
+  import {
+    formRules,
+    employee
+  } from "./client.js";
+  export default {
+    components: {
+      actionBar,
+      tables,
+      pagination,
+      formsSafety
+    },
+    data() {
+      return {
+        staffTitle: '添加',
+        staffDialogVisible: false,
+        Pagination: {
+          PageIndex: 1,
+          PageSize: 10,
+        },
+        formList: [{
+          type: 'input',
+          label: '客户姓名',
+          field: 'T_name',
+          placeholder: '客户姓名',
+          colWidth: 'el-col-24',
+        }],
+        tableList: employee(),
+        tableData: [{
+          T_name: '2154'
+        }, {
+          T_name: '2154'
+        }, {
+          T_name: '2154'
+        }],
+        Total: 10,
+        formRuleList: [],
+        operationType: '',
+      }
+    },
+    mounted() {
+      const dataList = formRules();
+      this.formRuleList = dataList;
+      console.log(this.formRuleList, 25)
+    },
+    methods: {
+      buttonData(row, type) {
+        this.operationType = type
+        console.log(row, type, 25)
+        if (type == 'edit') {
+          this.staffTitle = '编辑'
+        } else {
+          this.staffTitle = '详情'
+        }
+        this.staffDialogVisible = true
+      },
+      changeSize(val) {
+        this.Pagination.PageSize = val
+      },
+      changeCurrent(val) {
+        this.Pagination.PageIndex = val
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  ::v-deep .el-dialog {
+    margin-top: 8vh !important;
+  }
+
+  .card_podia {
+    display: flex;
+  }
+
+  .seating_form_card {
+    width: 70%;
+  }
+
+  .seating_order {
+    width: 30%;
+  }
+
+  .card_seating_order {
+    margin: 0px 20px;
+  }
+</style>

src/views/customer/orderProcessing.vue

@@ -0,0 +1,101 @@
+<template>
+  <!-- 派单处理 -->
+  <div>
+    <actionBar menuTitle="派单处理" :formList="formList"></actionBar>
+    <tables :key="Math.random()" :suspension="true" :tableList="tableList" :tableData="tableData"
+      @buttonData="buttonData"></tables>
+    <!-- 分页 -->
+    <div class="paging_bottom" v-if="Total">
+      <pagination :total="Total" :currentPage="Pagination.PageIndex" @changeSize="changeSize"
+        @changeCurrent="changeCurrent">
+      </pagination>
+    </div>
+    <el-dialog :title="staffTitle" :visible.sync="staffDialogVisible" width="70%" :close-on-click-modal="false">
+      <forms ref="childRules" :formNewList="formRuleList" labelWidth="100px"></forms>
+      <span slot="footer" class="dialog-footer">
+        <el-button plain @click="staffDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="staffDialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import actionBar from '@/components/actionBar'
+  import tables from '@/components/tables'
+  import pagination from '@/components/pagination'
+  import forms from '@/components/forms'
+  import {
+    formRules,
+    employee
+  } from "./sendOrders.js";
+  export default {
+    components: {
+      actionBar,
+      tables,
+      pagination,
+      forms
+    },
+    data() {
+      return {
+        staffTitle: '添加',
+        staffDialogVisible: false,
+        Pagination: {
+          PageIndex: 1,
+          PageSize: 10,
+        },
+        formList: [{
+          type: 'input',
+          label: '订单时间',
+          field: 'T_name',
+          placeholder: '订单时间',
+          colWidth: 'el-col-24',
+        }, {
+          type: 'select',
+          label: '订单状态',
+          field: 'T_name',
+          placeholder: '订单状态',
+          colWidth: 'el-col-24',
+        }, {
+          type: 'input',
+          label: '客户电话',
+          field: 'T_name',
+          placeholder: '客户电话',
+          colWidth: 'el-col-24',
+        }],
+        tableList: employee(),
+        tableData: [{
+          T_name: '2154'
+        }, {
+          T_name: '2154'
+        }, {
+          T_name: '2154'
+        }],
+        Total: 10,
+        formRuleList: [],
+      }
+    },
+    mounted() {
+      const dataList = formRules();
+      this.formRuleList = dataList;
+    },
+    methods: {
+      buttonData(row, type) {
+        console.log(row, type, 25)
+        if (type == 'logs') {
+          this.staffTitle = '编辑'
+          this.staffDialogVisible = true
+        }
+      },
+      changeSize(val) {
+        this.Pagination.PageSize = val
+      },
+      changeCurrent(val) {
+        this.Pagination.PageIndex = val
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/customer/orderTable.js

@@ -0,0 +1,199 @@
+import {
+  urbanArea
+} from '@/assets/js/districtCode'
+export const employee = () => {
+  return [{
+    field: 'index',
+    label: '编号',
+    align: 'center',
+  }, {
+    field: 'T_state',
+    operation: true,
+    label: '状态',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '客户类型',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '客户名称',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '客户电话',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '客户地址',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '配送门店',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '配送人员',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '商品',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '数量',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '下单时间',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'action',
+    label: '操作',
+    colWidth: '200px',
+    align: 'center',
+    labelButton: [{
+      type: 'logs',
+      label: '查看',
+      icon: 'el-icon-tickets',
+      // style: 'primary',
+    }, {
+      type: 'del',
+      label: '作废',
+      icon: 'el-icon-delete',
+      style: 'danger',
+    }]
+  }]
+}
+
+export const formRules = () => {
+  return [{
+    field: 'T_sn',
+    label: '来电号码',
+    placeholder: '来电号码',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入来电号码',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_name',
+    label: '客户类型',
+    placeholder: '客户类型',
+    type: 'radio',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '选择客户类型',
+      trigger: 'change'
+    }],
+    options: [{
+        label: '商户',
+        value: "1",
+      },
+      {
+        label: '私人',
+        value: "2",
+      }
+    ]
+  }, {
+    field: 'T_online',
+    type: 'select',
+    label: '商品',
+    placeholder: '请选择',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请选择商品',
+      trigger: 'change'
+    }],
+    options: [],
+  }, {
+    field: 'CreateTime',
+    label: '数量',
+    placeholder: '数量',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入数量',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_online',
+    type: 'select',
+    label: '配送门店',
+    placeholder: '请选择配送门店',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请选择配送门店',
+      trigger: 'change'
+    }],
+    options: [],
+  }, {
+    field: 'T_online',
+    type: 'select',
+    label: '配送员',
+    placeholder: '请选择配送员',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请选择配送员',
+      trigger: 'change'
+    }],
+    options: [],
+  }, {
+    field: 'T_sn',
+    label: '备注',
+    placeholder: '备注',
+    type: 'textarea',
+    colWidth: 24,
+  }, {
+    label: '客户资料',
+    type: 'divider',
+    colWidth: 24,
+  }, {
+    field: 'T_sn',
+    label: '名字',
+    placeholder: '名字',
+    type: 'input',
+    colWidth: 12,
+  }, {
+    field: 'T_sn',
+    label: '电话',
+    placeholder: '电话',
+    type: 'input',
+    colWidth: 12,
+  }, {
+    field: 'T_online',
+    type: 'cascader',
+    label: '所在城市/地区',
+    placeholder: '请选择',
+    colWidth: 24,
+    rules: [{
+      required: true,
+      message: '请选择所在城市/地区',
+      trigger: 'change'
+    }],
+    options: urbanArea(),
+  }, {
+    field: 'T_sn',
+    label: '详细地址',
+    placeholder: '详细地址',
+    type: 'input',
+    colWidth: 12,
+  }]
+}

src/views/customer/pigeonhole.js

@@ -0,0 +1,190 @@
+import {
+  urbanArea
+} from '@/assets/js/districtCode'
+export const formRules = () => {
+  return [{
+    field: 'type',
+    label: '类型',
+    placeholder: '类型',
+    type: 'radio',
+    colWidth: 24,
+    rules: [{
+      required: true,
+      message: '选择客户类型',
+      trigger: 'change'
+    }],
+    options: [{
+        label: '商户',
+        value: "1",
+      },
+      {
+        label: '私人',
+        value: "2",
+      },
+    ]
+  }, {
+    field: 'name',
+    label: '名字',
+    placeholder: '名字',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入名字',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'principalPhone',
+    label: '电话',
+    placeholder: '电话',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入电话',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_online',
+    type: 'cascader',
+    label: '所在城市/地区',
+    placeholder: '请选择',
+    colWidth: 24,
+    rules: [{
+      required: true,
+      message: '请选择所在城市/地区',
+      trigger: 'change'
+    }],
+    options: urbanArea(),
+  }, {
+    field: 'address',
+    label: '地址',
+    placeholder: '地址',
+    type: 'input',
+    colWidth: 24,
+    rules: [{
+      required: true,
+      message: '请输入地址',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'lng',
+    label: '经度',
+    placeholder: '经度',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入经度',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'lat',
+    label: '纬度',
+    placeholder: '纬度',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入纬度',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'remark',
+    label: '备注',
+    placeholder: '备注',
+    type: 'textarea',
+    colWidth: 24,
+  }, {
+    field: 'T_sn',
+    crosswise: true,
+    label: '现场图片',
+    type: 'upload',
+    colWidth: 6,
+    rules: [{
+      required: true,
+      message: '请上传现场图片',
+      trigger: 'blur'
+    }],
+  }, ]
+}
+
+export const employee = () => {
+  return [{
+    field: 'index',
+    label: '序号',
+    align: 'center',
+  }, {
+    field: 'name',
+    operation: true,
+    label: '名字',
+    align: 'center',
+    colWidth: '130px',
+  }, {
+    field: 'principalPhone',
+    label: '电话',
+    align: 'center',
+    colWidth: '130px',
+  }, {
+    field: 'city',
+    label: '所在地市',
+    align: 'center',
+    colWidth: '130px',
+  }, {
+    field: 'area',
+    label: '所属区/县',
+    align: 'center',
+    colWidth: '130px',
+  }, {
+    field: 'address',
+    label: '地址',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'addressImg',
+    label: '现场图片',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'lng',
+    label: '经度',
+    align: 'center',
+    colWidth: '130px',
+  }, {
+    field: 'lat',
+    label: '纬度',
+    align: 'center',
+    colWidth: '130px',
+  }, {
+    field: 'type',
+    label: '类型',
+    align: 'center',
+    colWidth: '130px',
+  }, {
+    field: 'remark',
+    label: '备注描述',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'action',
+    label: '操作',
+    colWidth: '200px',
+    align: 'center',
+    labelButton: [{
+      type: 'edit',
+      label: '编辑',
+      icon: 'el-icon-edit',
+      style: 'primary',
+    }, {
+      type: 'logs',
+      label: '查看',
+      icon: 'el-icon-tickets',
+      // style: 'primary',
+    }, {
+      type: 'del',
+      label: '删除',
+      icon: 'el-icon-delete',
+      style: 'danger',
+    }]
+  }]
+}

src/views/customer/sendOrders.js

@@ -0,0 +1,195 @@
+export const employee = () => {
+  return [{
+    field: 'index',
+    label: '编号',
+    align: 'center',
+  }, {
+    field: 'T_state',
+    operation: true,
+    label: '状态',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '客户类型',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '客户名称',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '客户电话',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '客户地址',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '配送门店',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '配送人员',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '商品',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '数量',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '下单时间',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'action',
+    label: '操作',
+    colWidth: '200px',
+    align: 'center',
+    labelButton: [{
+      type: 'send',
+      label: '派单',
+      icon: 'el-icon-tickets',
+      style: 'primary',
+    }, {
+      type: 'logs',
+      label: '查看',
+      icon: 'el-icon-tickets',
+      // style: 'primary',
+    }, ]
+  }]
+}
+
+export const formRules = () => {
+  return [{
+    label: '客户信息',
+    type: 'divider',
+    colWidth: 24,
+  },{
+    field: 'name',
+    label: '名字:',
+    type: 'descriptions',
+    colWidth: 12,
+  },{
+    field: 'CreateTime',
+    label: '电话:',
+    type: 'descriptions',
+    colWidth: 12,
+  },{
+    field: 'CreateTime',
+    label: '所在城市:',
+    type: 'descriptions',
+    colWidth: 12,
+  },{
+    field: 'CreateTime',
+    label: '所属区/县:',
+    type: 'descriptions',
+    colWidth: 12,
+  },{
+    field: 'CreateTime',
+    label: '地址:',
+    type: 'descriptions',
+    colWidth: 12,
+  },{
+    type: 'dividingSlot',
+    colWidth: 24,
+  },{
+    label: '订单信息',
+    type: 'divider',
+    colWidth: 24,
+  }, {
+    field: 'T_online',
+    type: 'select',
+    label: '商品',
+    placeholder: '请选择',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请选择商品',
+      trigger: 'change'
+    }],
+    options: [],
+  }, {
+    field: 'CreateTime',
+    label: '数量',
+    placeholder: '数量',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入数量',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_online',
+    type: 'select',
+    label: '配送门店',
+    placeholder: '请选择配送门店',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请选择配送门店',
+      trigger: 'change'
+    }],
+    options: [],
+  }, {
+    field: 'T_online',
+    type: 'select',
+    label: '配送员',
+    placeholder: '请选择配送员',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请选择配送员',
+      trigger: 'change'
+    }],
+    options: [],
+  }, {
+    field: 'T_sn',
+    label: '备注',
+    placeholder: '备注',
+    type: 'textarea',
+    colWidth: 24,
+  }, {
+    field: 'T_name',
+    label: '状态',
+    placeholder: '状态',
+    type: 'radio',
+    colWidth: 24,
+    rules: [{
+      required: true,
+      message: '选择订单状态',
+      trigger: 'change'
+    }],
+    options: [{
+        label: '已下单',
+        value: "1",
+      },
+      {
+        label: '已派单',
+        value: "2",
+      },
+      {
+        label: '已完成',
+        value: "3",
+      },
+      {
+        label: '已作废',
+        value: "4",
+      }
+    ]
+  }, ]
+}

src/views/manufacture/carTable.js

@@ -0,0 +1,167 @@
+export const tableRules = () => {
+  return [{
+    field: 'T_name',
+    label: '车牌号',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'T_tab',
+    label: '道路运输证有效期',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'T_type',
+    label: '道路运输证编号',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'T_read',
+    label: '车辆核定载货量',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'T_filter',
+    label: '车辆资格证',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'T_save',
+    label: '车辆运输类型',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'extend',
+    label: '业户名称',
+    align: 'center',
+  }, {
+    field: 'T_save',
+    label: '联系电话',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'T_save',
+    label: '发证机关',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'action',
+    label: '操作',
+    colWidth: '400px',
+    align: 'center',
+    labelButton: [{
+      type: 'edit',
+      label: '编辑',
+      icon: 'el-icon-edit',
+      style: 'primary',
+    }, {
+      type: 'del',
+      label: '删除',
+      icon: 'el-icon-delete',
+      style: 'danger',
+    }]
+  }]
+}
+
+export const rules = () => {
+  return [{
+    field: 'T_sn',
+    label: '车牌号',
+    placeholder: '车牌号',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入车牌号',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '道路运输证有效期',
+    placeholder: '道路运输证有效期',
+    type: 'time',
+    colWidth: 12,
+    rules: [{
+      type: 'date',
+      required: true,
+      message: '请选择道路运输证有效期',
+      trigger: 'change'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '道路运输证编号',
+    placeholder: '道路运输证编号',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入道路运输证编号',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '车辆核定载货量',
+    placeholder: '车辆核定载货量',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入车辆核定载货量',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '车辆资格证',
+    placeholder: '车辆资格证',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入车辆资格证',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '车辆运输类型',
+    placeholder: '车辆运输类型',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入车辆运输类型',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '业户名称',
+    placeholder: '业户名称',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入业户名称',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '联系电话',
+    placeholder: '联系电话',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入联系电话',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '发证机关',
+    placeholder: '发证机关',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入发证机关',
+      trigger: 'blur'
+    }]
+  }, ]
+}

src/views/Error.vue → src/views/manufacture/cylinderFile.vue

@@ -1,11 +1,9 @@
 <template>
-  <div>2</div>
+  <!-- 钢瓶档案 -->
+  <div>钢瓶档案</div>
 </template>
 
 <script>
-  export default{
-    name: 'ErrorName',
-  }
 </script>
 
 <style>

src/views/manufacture/vehicle.vue

@@ -0,0 +1,100 @@
+<template>
+  <!-- 车辆管理 -->
+  <div>
+    <actionBar menuTitle="车辆管理" :operateList="operateList" :formList="formList" @openModel="openModel"></actionBar>
+    <tables :key="Math.random()" :suspension="true" :tableList="tableList" :tableData="tableData" @buttonData="buttonData"></tables>
+    <!-- 分页 -->
+    <div class="paging_bottom" v-if="Pagination.Total">
+      <el-pagination small layout="prev, pager, next" :total="Pagination.Total" @size-change="changeSize"
+        @current-change="changeCurrent">
+      </el-pagination>
+    </div>
+    <el-dialog :title="shopTitle" :visible.sync="shopDialogVisible" width="60%" :close-on-click-modal="false">
+      <forms ref="childRules" :formNewList="formRuleList" labelWidth="150px"></forms>
+      <span slot="footer" class="dialog-footer">
+        <el-button plain @click="shopDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleAdd">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import actionBar from '@/components/actionBar'
+  import tables from '@/components/tables'
+  import pagination from '@/components/pagination'
+  import forms from '@/components/forms'
+  import {
+    rules,
+    tableRules
+  } from "./carTable.js";
+  export default {
+    components: {
+      actionBar,
+      tables,
+      pagination,
+      forms
+    },
+    data() {
+      return {
+        Pagination: {
+          PageIndex: 1,
+          PageSize: 10,
+          Total: 0,
+        },
+        formList: [{
+          type: 'input',
+          label: '车牌号',
+          field: 'T_name',
+          placeholder: '请输入车牌号查找',
+          colWidth: 'el-col-24',
+        }],
+        operateList: [{
+          type: 'add',
+          title: '添加车辆',
+          icon: 'el-icon-plus',
+        }],
+        tableList: tableRules(),
+        tableData: [],
+        shopDialogVisible: false,
+        shopTitle: '添加',
+        formRuleList: [],
+      }
+    },
+    mounted() {
+      const dataList = rules();
+      this.formRuleList = dataList;
+    },
+    methods: {
+      openModel(type) {
+        console.log(type, 24)
+        if (type == 'add') {
+          this.staffTitle = '添加'
+        }
+        this.shopDialogVisible = true
+      },
+      // 弹窗表单添加
+      handleAdd() {
+        let flag = this.$refs['childRules'].validateForm();
+        if (flag) {
+          console.log(this.formRuleList);
+        } else {
+          this.$message.error('表单信息不完整，请继续填写完整');
+        }
+      },
+      // 表格操作按钮
+      buttonData(row, type) {
+        console.log(row, type, 4)
+      },
+      changeSize(val) {
+        this.Pagination.PageSize = val
+      },
+      changeCurrent(val) {
+        this.Pagination.PageIndex = val
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/marketing/order.js

@@ -0,0 +1,128 @@
+export const employee = () => {
+  return [{
+    field: 'index',
+    label: '编号',
+    align: 'center',
+  }, {
+    field: 'T_state',
+    operation: true,
+    label: '客户类型',
+    align: 'center',
+  }, {
+    field: 'T_connect',
+    label: '客户名称',
+    align: 'center',
+  }, {
+    field: 'T_connect',
+    label: '客户电话',
+    align: 'center',
+  }, {
+    field: 'T_connect',
+    label: '客户地址',
+    align: 'center',
+  }, {
+    field: 'T_connect',
+    label: '配送门店',
+    align: 'center',
+  }, {
+    field: 'T_connect',
+    label: '配送人员',
+    align: 'center',
+  }, {
+    field: 'T_connect',
+    label: '商品',
+    align: 'center',
+  }, {
+    field: 'T_connect',
+    label: '数量',
+    align: 'center',
+  }, {
+    field: 'T_connect',
+    label: '状态',
+    align: 'center',
+  }, {
+    field: 'T_connect',
+    label: '下单时间',
+    align: 'center',
+  }, {
+    field: 'action',
+    label: '操作',
+    colWidth: '200px',
+    align: 'center',
+    labelButton: [{
+      type: 'logs',
+      label: '查看',
+      icon: 'el-icon-tickets',
+      // style: 'primary',
+    }]
+  }]
+}
+export const formRules = () => {
+  return [{
+    label: '客户信息',
+    type: 'divider',
+    colWidth: 24,
+  }, {
+    field: 'name',
+    label: '名字:',
+    type: 'descriptions',
+    colWidth: 12,
+  }, {
+    field: 'CreateTime',
+    label: '电话:',
+    type: 'descriptions',
+    colWidth: 12,
+  }, {
+    field: 'CreateTime',
+    label: '所在城市:',
+    type: 'descriptions',
+    colWidth: 12,
+  }, {
+    field: 'CreateTime',
+    label: '所属区/县:',
+    type: 'descriptions',
+    colWidth: 12,
+  }, {
+    field: 'CreateTime',
+    label: '地址:',
+    type: 'descriptions',
+    colWidth: 12,
+  }, {
+    type: 'dividingSlot',
+    colWidth: 24,
+  }, {
+    label: '订单信息',
+    type: 'divider',
+    colWidth: 24,
+  }, {
+    field: 'T_online',
+    type: 'descriptions',
+    label: '商品',
+    colWidth: 12,
+  }, {
+    field: 'CreateTime',
+    label: '数量',
+    type: 'descriptions',
+    colWidth: 12,
+  }, {
+    field: 'T_online',
+    type: 'descriptions',
+    label: '配送门店',
+    colWidth: 12,
+  }, {
+    field: 'T_online',
+    type: 'descriptions',
+    label: '配送员',
+    colWidth: 12,
+  }, {
+    field: 'T_sn',
+    label: '备注',
+    type: 'descriptions',
+    colWidth: 24,
+  }, {
+    field: 'T_name',
+    label: '状态',
+    type: 'descriptions',
+    colWidth: 24,
+  }, ]
+}

src/views/marketing/orderManagement.vue

@@ -0,0 +1,116 @@
+<template>
+  <!-- 订单管理 -->
+  <div>
+    <actionBar menuTitle="订单管理" :formList="formList"></actionBar>
+    <tables :key="Math.random()" :suspension="false" :tableList="tableList" :tableData="tableData"
+      @buttonData="buttonData"></tables>
+    <!-- 分页 -->
+    <div class="paging_bottom" v-if="Total">
+      <pagination :total="Total" :currentPage="Pagination.PageIndex" @changeSize="changeSize"
+        @changeCurrent="changeCurrent">
+      </pagination>
+    </div>
+    <el-dialog :title="staffTitle" :visible.sync="staffDialogVisible" width="60%" :close-on-click-modal="false">
+      <forms ref="childRules" :formNewList="formRuleList" labelWidth="100px"></forms>
+      <span slot="footer" class="dialog-footer">
+        <el-button plain @click="staffDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="staffDialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+    <div ref="root"></div>
+  </div>
+</template>
+
+<script>
+  import actionBar from '@/components/actionBar'
+  import tables from '@/components/tables'
+  import pagination from '@/components/pagination'
+  import forms from '@/components/forms'
+  import {
+    formRules,
+    employee
+  } from "./order.js";
+  import { ref, onMounted } from 'vue'
+  export default {
+    setup() {
+      const root = ref(null)
+      onMounted(() => {
+        // 在渲染完成后, 这个 div DOM 会被赋值给 root ref 对象
+        console.log(root.value,999) // <div/>
+      })
+      return {
+        root,
+      }
+    },
+    components: {
+      actionBar,
+      tables,
+      pagination,
+      forms
+    },
+    data() {
+      return {
+        staffTitle: '添加',
+        staffDialogVisible: false,
+        formList: [{
+          type: 'input',
+          label: '订单时间',
+          field: 'T_name',
+          placeholder: '订单时间',
+          colWidth: 'el-col-24',
+        }, {
+          type: 'select',
+          label: '订单状态',
+          field: 'state',
+          placeholder: '订单状态',
+          colWidth: 'el-col-24',
+        }, {
+          type: 'input',
+          label: '客户电话',
+          field: 'phone',
+          placeholder: '客户电话',
+          colWidth: 'el-col-24',
+        }],
+        tableList: employee(),
+        tableData: [{
+          T_name: '2154'
+        }, {
+          T_name: '2154'
+        }, {
+          T_name: '2154'
+        }],
+        Pagination: {
+          PageIndex: 1,
+          PageSize: 10,
+        },
+        Total: 10,
+        formRuleList: [],
+      }
+    },
+    mounted() {
+      const dataList = formRules();
+      this.formRuleList = dataList;
+    },
+    methods: {
+      buttonData(row, type) {
+        this.operationType = type
+        console.log(row, type, 25)
+        if (type == 'edit') {
+          this.staffTitle = '编辑'
+        } else {
+          this.staffTitle = '详情'
+        }
+        this.staffDialogVisible = true
+      },
+      changeSize(val) {
+        this.Pagination.PageSize = val
+      },
+      changeCurrent(val) {
+        this.Pagination.PageIndex = val
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/page/Home.vue

@@ -1,17 +1,32 @@
 <template>
   <div class="home">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <HelloWorld msg="Welcome to Your Vue.js App" />
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'HomeView',
-  components: {
-    HelloWorld
+  import HelloWorld from '@/components/HelloWorld.vue'
+  import {
+    getToken,
+    getTokenil
+  } from '@/api/login'
+  export default {
+    name: 'HomeView',
+    components: {
+      HelloWorld
+    },
+    data() {
+      return {}
+    },
+    mounted() {
+      // this.getlogin()
+    },
+    methods: {
+      getlogin() {
+        getTokenil().then(res=>{
+          console.log(res,5768)
+        })
+      }
+    }
   }
-}
 </script>

src/views/system/employee.vue

@@ -0,0 +1,81 @@
+<template>
+  <!-- 员工管理 -->
+  <div>
+    <actionBar menuTitle="员工管理" :operateList="operateList" @openModel="openModel"></actionBar>
+    <tables :key="Math.random()" :suspension="true" :tableList="tableList" :tableData="tableData" @buttonData="buttonData"></tables>
+    <!-- 分页 -->
+    <div class="paging_bottom" v-if="Total">
+      <pagination :total="Total" :currentPage="Pagination.PageIndex" @changeSize="changeSize"
+        @changeCurrent="changeCurrent">
+      </pagination>
+    </div>
+    <el-dialog :title="staffTitle" :visible.sync="staffDialogVisible" width="60%" :close-on-click-modal="false">
+      <form-employee></form-employee>
+      <span slot="footer" class="dialog-footer">
+        <el-button plain @click="staffDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="staffDialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import actionBar from '@/components/actionBar'
+  import tables from '@/components/tables'
+  import pagination from '@/components/pagination'
+  import formEmployee from '@/components/formEmployee'
+  import {
+    employee
+  } from "./shopTable.js";
+  export default {
+    components: {
+      actionBar,
+      tables,
+      pagination,
+      formEmployee
+    },
+    data() {
+      return {
+        staffTitle: '添加',
+        staffDialogVisible: false,
+        Pagination: {
+          PageIndex: 1,
+          PageSize: 10,
+        },
+        operateList: [{
+          type: 'add',
+          title: '添加',
+          icon: 'el-icon-plus',
+        }],
+        tableList: employee(),
+        tableData: [{
+          T_name: '2154'
+        }, {
+          T_name: '2154'
+        }, {
+          T_name: '2154'
+        }],
+        Total: 10,
+      }
+    },
+    methods: {
+      openModel(type) {
+        console.log(type, 24)
+        if (type == 'add') {
+          this.staffTitle = '添加'
+        }
+        this.staffDialogVisible = true
+      },
+      buttonData(row, type) {},
+      changeSize(val) {
+        this.Pagination.PageSize = val
+      },
+      changeCurrent(val) {
+        this.Pagination.PageIndex = val
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/system/jurisdiction.vue

@@ -0,0 +1,170 @@
+<template>
+  <!-- 权限管理 -->
+  <div>
+    <actionBar menuTitle="权限管理" :operateList="operateList" :formList="formList" @openModel="openModel"></actionBar>
+    <tables :key="Math.random()" :tableList="tableList" :tableData="tableData" @buttonData="buttonData"></tables>
+    <!-- 分页 -->
+    <div class="paging_bottom" v-if="Total">
+      <pagination :total="Total" :currentPage="Pagination.PageIndex" @changeSize="changeSize"
+        @changeCurrent="changeCurrent">
+      </pagination>
+    </div>
+    <el-dialog :title="staffTitle" :visible.sync="jurisdictionDialog" width="60%" :close-on-click-modal="false">
+      <div>
+        <el-form ref="form" :model="form" label-width="80px">
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="名称">
+                <el-input v-model="form.name"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="备注">
+                <el-input v-model="form.desc"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="菜单">
+                <el-tree :data="data" show-checkbox node-key="id" :props="defaultProps">
+                </el-tree>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button plain @click="jurisdictionDialog = false">取 消</el-button>
+        <el-button type="primary" @click="jurisdictionDialog = false">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import actionBar from '@/components/actionBar'
+  import tables from '@/components/tables'
+  import pagination from '@/components/pagination'
+  export default {
+    components: {
+      actionBar,
+      tables,
+      pagination,
+    },
+    data() {
+      return {
+        staffTitle: '添加',
+        jurisdictionDialog: false,
+        Pagination: {
+          PageIndex: 1,
+          PageSize: 10,
+        },
+        formList: [{
+          type: 'input',
+          label: '权限名称',
+          field: 'T_name',
+          placeholder: '权限名称',
+          colWidth: 'el-col-24',
+        }],
+        operateList: [{
+          type: 'add',
+          title: '添加',
+          icon: 'el-icon-plus',
+        }],
+        tableList: [{
+          field: 'T_name',
+          label: '权限',
+          align: 'center',
+        }, {
+          field: 'T_state',
+          operation: true,
+          label: '备注',
+          align: 'center',
+        }, {
+          field: 'action',
+          label: '操作',
+          colWidth: '200px',
+          align: 'center',
+          labelButton: [{
+            type: 'edit',
+            label: '编辑',
+            icon: 'el-icon-edit',
+            style: 'primary',
+          }, {
+            type: 'logs',
+            label: '详情',
+            icon: 'el-icon-tickets',
+            // style: 'primary',
+          }, {
+            type: 'del',
+            label: '删除',
+            icon: 'el-icon-delete',
+            style: 'danger',
+          }]
+        }],
+        tableData: [{
+          T_name: '2154'
+        }, {
+          T_name: '2154'
+        }, {
+          T_name: '2154'
+        }],
+        Total: 10,
+        data: [{
+          id: 1,
+          label: '一级 1',
+          children: [{
+            id: 4,
+            label: '二级 1-1',
+          }]
+        }, {
+          id: 2,
+          label: '一级 2',
+          children: [{
+            id: 5,
+            label: '二级 2-1'
+          }, {
+            id: 6,
+            label: '二级 2-2'
+          }]
+        }, {
+          id: 3,
+          label: '一级 3',
+          children: [{
+            id: 7,
+            label: '二级 3-1'
+          }, {
+            id: 8,
+            label: '二级 3-2'
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        },
+        form: {
+          name: '',
+          desc: ''
+        }
+      }
+    },
+    methods: {
+      openModel(type) {
+        console.log(type, 24)
+        if (type == 'add') {
+          this.staffTitle = '添加'
+        }
+        this.jurisdictionDialog = true
+      },
+      buttonData(row, type) {},
+      changeSize(val) {
+        this.Pagination.PageSize = val
+      },
+      changeCurrent(val) {
+        this.Pagination.PageIndex = val
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/system/outlet.js

@@ -0,0 +1,224 @@
+import {
+  urbanArea
+} from '@/assets/js/districtCode'
+export const formRules = () => {
+  return [{
+    label: '基本信息',
+    type: 'divider',
+    colWidth: 24,
+  }, {
+    field: 'T_sn',
+    label: '社会信用代码',
+    placeholder: '社会信用代码',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入社会信用代码',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_name',
+    label: '门店名称',
+    placeholder: '门店名称',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入门店名称',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'CreateTime',
+    label: '联系人',
+    placeholder: '联系人',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入联系人',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'UpdateTime',
+    label: '联系人电话',
+    placeholder: '联系人电话',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入联系人电话',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_online',
+    type: 'cascader',
+    label: '所在城市/地区',
+    placeholder: '请选择',
+    colWidth: 24,
+    rules: [{
+      required: true,
+      message: '请选择所在城市/地区',
+      trigger: 'change'
+    }],
+    options: urbanArea(),
+  }, {
+    field: 'T_sn',
+    label: '详细地址',
+    placeholder: '详细地址',
+    type: 'input',
+    colWidth: 24,
+    rules: [{
+      required: true,
+      message: '请输入详细地址',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'CreateTime',
+    label: '经度',
+    placeholder: '经度',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入经度人',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'CreateTime',
+    label: '纬度',
+    placeholder: '纬度',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入纬度',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '描述',
+    placeholder: '描述',
+    type: 'textarea',
+    colWidth: 24,
+  }, {
+    label: '《燃气经营许可证》信息',
+    type: 'divider',
+    colWidth: 24,
+  }, {
+    field: 'T_sn',
+    label: '许可证编号',
+    placeholder: '许可证编号',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入许可证编号',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '经营类别',
+    placeholder: '经营类别',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入经营类别址',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '经营区域',
+    placeholder: '经营区域',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入经营区域',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '法人姓名',
+    placeholder: '法人姓名',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入法人姓名',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '发证部门',
+    placeholder: '发证部门',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入发证部门',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '发证时间',
+    placeholder: '发证时间',
+    type: 'time',
+    colWidth: 12,
+    rules: [{
+      type: 'date',
+      required: true,
+      message: '请选择发证时间',
+      trigger: 'change'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '开始时间',
+    placeholder: '开始时间',
+    type: 'time',
+    colWidth: 12,
+    rules: [{
+      type: 'date',
+      required: true,
+      message: '请选择开始时间',
+      trigger: 'change'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '证件有效期',
+    placeholder: '证件有效期',
+    type: 'time',
+    colWidth: 12,
+    rules: [{
+      type: 'date',
+      required: true,
+      message: '请选择证件有效期',
+      trigger: 'change'
+    }]
+  }, {
+    label: '附件',
+    type: 'divider',
+    colWidth: 24,
+  }, {
+    field: 'T_sn',
+    label: '营业执照',
+    type: 'upload',
+    colWidth: 6,
+    rules: [{
+      required: true,
+      message: '请选择营业执照',
+      trigger: 'change,blur'
+    }],
+  }, {
+    field: 'T_sn',
+    label: '燃气经营许可证',
+    type: 'upload',
+    colWidth: 6,
+    rules: [{
+      required: true,
+      message: '请选择燃气经营许可证',
+      trigger: 'change,blur'
+    }],
+  }]
+}

src/views/system/salesStore.vue

@@ -0,0 +1,119 @@
+<template>
+  <!-- 销售门店管理 -->
+  <div>
+    <actionBar menuTitle="销售门店管理" :operateList="operateList" :formList="formList" @openModel="openModel"></actionBar>
+    <treeTable :suspension="true" :treeData="treeData" :treeDataList="treeDataList" @buttonData="buttonData">
+    </treeTable>
+    <!-- 分页 -->
+    <div class="paging_bottom" v-if="Pagination.Total">
+      <pagination :total="Pagination.Total" :currentPage="Pagination.PageIndex" @changeSize="changeSize"
+        @changeCurrent="changeCurrent">
+      </pagination>
+    </div>
+    <el-dialog :title="shopTitle" :visible.sync="shopDialogVisible" width="60%" :close-on-click-modal="false">
+      <forms ref="childRules" :formNewList="formRuleList"></forms>
+      <span slot="footer" class="dialog-footer">
+        <el-button plain @click="shopDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleAdd">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import actionBar from '@/components/actionBar'
+  import treeTable from '@/components/treeTable'
+  import pagination from '@/components/pagination'
+  import forms from '@/components/forms'
+  import {
+    rules
+  } from "./shopTable.js";
+  import {
+    formRules
+  } from "./outlet.js";
+  export default {
+    components: {
+      actionBar,
+      treeTable,
+      pagination,
+      forms
+    },
+    data() {
+      return {
+        Pagination: {
+          PageIndex: 1,
+          PageSize: 10,
+          Total: 10,
+        },
+        formList: [{
+          type: 'input',
+          label: '销售门店',
+          field: 'T_name',
+          placeholder: '请输入销售门店名称查找',
+          colWidth: 'el-col-24',
+        }],
+        operateList: [{
+          type: 'add',
+          title: '添加一级销售门店',
+          icon: 'el-icon-plus',
+        }],
+        treeData: rules(),
+        treeDataList: [{
+          id: 3,
+          socialCode: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄',
+          children: [{
+            id: 31,
+            socialCode: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+          }, {
+            id: 32,
+            socialCode: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+          }]
+        }, ],
+        shopDialogVisible: false,
+        shopTitle: '添加',
+        formRuleList:[],
+      }
+    },
+    mounted() {
+      const dataList = formRules();
+      this.formRuleList = dataList;
+    },
+    methods: {
+      openModel(type) {
+        console.log(type, 24)
+        if (type == 'add') {
+          this.staffTitle = '添加'
+        }
+        this.shopDialogVisible = true
+      },
+      // 弹窗表单添加
+      handleAdd() {
+        let flag = this.$refs['childRules'].validateForm();
+        if (flag) {
+          console.log(this.formRuleList);
+        } else {
+          this.$message.error('表单信息不完整，请继续填写完整');
+        }
+      },
+      // 表格操作按钮
+      buttonData(row, type) {
+        console.log(row, type, 4)
+      },
+      changeSize(val) {
+        this.Pagination.PageSize = val
+      },
+      changeCurrent(val) {
+        this.Pagination.PageIndex = val
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/system/shopTable.js

@@ -0,0 +1,187 @@
+export const rules = () => {
+  return [{
+    field: 'name',
+    label: '门店名称',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'contact',
+    label: '联系人',
+    colWidth: '120',
+    align: 'center',
+  }, {
+    field: 'contactPhone',
+    label: '联系电话',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'district',
+    label: '所在区/县',
+    colWidth: '100',
+    align: 'center',
+  },  {
+    field: 'address',
+    label: '地址',
+    colWidth: '100',
+    align: 'center',
+  }, {
+    field: 'certificateNo',
+    label: '许可证编号',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'type',
+    label: '经营类别',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'businessArea',
+    label: '经营区域',
+    align: 'center',
+  }, {
+    field: 'legalPerson',
+    label: '法人姓名',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'issueAuthority',
+    label: '发证部门',
+    colWidth: '150',
+    align: 'center',
+  },  {
+    field: 'issueTime',
+    label: '发证时间',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'startTime',
+    label: '开始时间',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'expireTime',
+    label: '证件有效期',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'description',
+    label: '描述',
+    colWidth: '150',
+    align: 'center',
+  },{
+    field: 'cmpCode',
+    label: '所属企业登记编码',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'action',
+    label: '操作',
+    colWidth: '300px',
+    align: 'center',
+    labelButton: [{
+      type: 'edit',
+      label: '新增子级',
+      icon: 'el-icon-edit',
+      style: 'primary',
+    }, {
+      type: 'edit',
+      label: '修改',
+      icon: 'el-icon-edit',
+      style: 'primary',
+    }, {
+      type: 'logs',
+      label: '详情',
+      icon: 'el-icon-tickets',
+    }, {
+      type: 'del',
+      label: '删除',
+      icon: 'el-icon-delete',
+      style: 'danger',
+    }]
+  }]
+}
+
+export const employee = () => {
+  return [{
+    field: 'T_name',
+    label: '管理员',
+    align: 'center',
+  }, {
+    field: 'T_state',
+    operation: true,
+    label: '姓名',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '身份证号',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '工号',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '联系电话',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '用户类型',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '聘用状态',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '聘用日期',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '教育程度',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '岗位类型',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '资质',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'T_connect',
+    label: '用户类型',
+    align: 'center',
+    colWidth: '200px',
+  }, {
+    field: 'action',
+    label: '操作',
+    colWidth: '200px',
+    align: 'center',
+    labelButton: [{
+      type: 'edit',
+      label: '编辑',
+      icon: 'el-icon-edit',
+      style: 'primary',
+    }, {
+      type: 'logs',
+      label: '详情',
+      icon: 'el-icon-tickets',
+      // style: 'primary',
+    }, {
+      type: 'del',
+      label: '删除',
+      icon: 'el-icon-delete',
+      style: 'danger',
+    }]
+  }]
+}

src/views/system/transport.vue

@@ -0,0 +1,118 @@
+<template>
+  <!-- 运输企业管理 -->
+  <div>
+    <actionBar menuTitle="运输企业管理" :operateList="operateList" :formList="formList" @openModel="openModel"></actionBar>
+    <treeTable :suspension="true" :treeData="treeData" :treeDataList="treeDataList" @buttonData="buttonData">
+    </treeTable>
+    <!-- 分页 -->
+    <div class="paging_bottom" v-if="Total">
+      <pagination :total="Total" :currentPage="Pagination.PageIndex" @changeSize="changeSize"
+        @changeCurrent="changeCurrent">
+      </pagination>
+    </div>
+    <el-dialog :title="shopTitle" :visible.sync="shopDialogVisible" width="60%" :close-on-click-modal="false">
+      <forms ref="childRules" :formNewList="formRuleList" labelWidth="130px"></forms>
+      <span slot="footer" class="dialog-footer">
+        <el-button plain @click="shopDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleAdd">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import actionBar from '@/components/actionBar'
+  import treeTable from '@/components/treeTable'
+  import pagination from '@/components/pagination'
+  import forms from '@/components/forms'
+  import {
+    rules,
+    formRules
+  } from "./transportation.js";
+  export default {
+    components: {
+      actionBar,
+      treeTable,
+      pagination,
+      forms
+    },
+    data() {
+      return {
+        Total: 2,
+        Pagination: {
+          PageIndex: 1,
+          PageSize: 10,
+          Total: 2,
+        },
+        formList: [{
+          type: 'input',
+          label: '运输企业名称',
+          field: 'T_name',
+          placeholder: '请输入运输企业名称查找',
+          colWidth: 'el-col-24',
+        }],
+        operateList: [{
+          type: 'add',
+          title: '添加一级运输企业',
+          icon: 'el-icon-plus',
+        }],
+        treeData: rules(),
+        treeDataList: [{
+          id: 3,
+          socialCode: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄',
+          children: [{
+            id: 31,
+            socialCode: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+          }, {
+            id: 32,
+            socialCode: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+          }]
+        }, ],
+        shopDialogVisible: false,
+        shopTitle: '添加',
+        formRuleList: [],
+      }
+    },
+    mounted() {
+      const dataList = formRules();
+      this.formRuleList = dataList;
+    },
+    methods: {
+      openModel(type) {
+        console.log(type, 24)
+        if (type == 'add') {
+          this.staffTitle = '添加'
+        }
+        this.shopDialogVisible = true
+      },
+      // 弹窗表单添加
+      handleAdd() {
+        let flag = this.$refs['childRules'].validateForm();
+        if (flag) {
+          console.log(this.formRuleList);
+        } else {
+          this.$message.error('表单信息不完整，请继续填写完整');
+        }
+      },
+      // 表格操作按钮
+      buttonData(row, type) {
+        console.log(row, type, 4)
+      },
+      changeSize(val) {
+        this.Pagination.PageSize = val
+      },
+      changeCurrent(val) {
+        this.Pagination.PageIndex = val
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/system/transportation.js

@@ -0,0 +1,336 @@
+import {
+  urbanArea
+} from '@/assets/js/districtCode'
+export const rules = () => {
+  return [{
+    field: 'socialCode',
+    label: '社会信用代码',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'name',
+    label: '企业名称',
+    colWidth: '120',
+    align: 'center',
+  }, {
+    field: 'enterPhone',
+    label: '企业联系电话',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'address',
+    label: '联系地址',
+    colWidth: '100',
+    align: 'center',
+  }, {
+    field: 'licenceNo',
+    label: '运营许可证号',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'issueAuthority',
+    label: '发证单位',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'issueTime',
+    label: '发证日期',
+    align: 'center',
+  }, {
+    field: 'businessScope',
+    label: '经营范围',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'qualifyImg',
+    label: '资质图片',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'qualifyStartTime',
+    label: '资质开始时间',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'qualifyEndTime',
+    label: '资质截止时间',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'legalPerson',
+    label: '法人代表',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'legalPersonPhone',
+    label: '法人代表电话',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'securityPerson',
+    label: '安全管理员',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'securityPersonPhone',
+    label: '安全管理员电话',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'city',
+    label: '所在城市',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'area',
+    label: '所在区/县',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'enterAccount',
+    label: '账号',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'remark',
+    label: '备注',
+    colWidth: '150',
+    align: 'center',
+  }, {
+    field: 'action',
+    label: '操作',
+    colWidth: '300px',
+    align: 'center',
+    labelButton: [{
+      type: 'edit',
+      label: '新增子级',
+      icon: 'el-icon-edit',
+      style: 'primary',
+    }, {
+      type: 'edit',
+      label: '修改',
+      icon: 'el-icon-edit',
+      style: 'primary',
+    }, {
+      type: 'logs',
+      label: '详情',
+      icon: 'el-icon-tickets',
+    }, {
+      type: 'del',
+      label: '删除',
+      icon: 'el-icon-delete',
+      style: 'danger',
+    }]
+  }]
+}
+
+export const formRules = () => {
+  return [{
+    label: '基本信息',
+    type: 'divider',
+    colWidth: 24,
+  }, {
+    field: 'T_sn',
+    label: '社会信用代码',
+    placeholder: '社会信用代码',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入社会信用代码',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_name',
+    label: '企业名称',
+    placeholder: '企业名称',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入企业名称',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'CreateTime',
+    label: '企业联系电话',
+    placeholder: '企业联系电话',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入企业联系电话',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'UpdateTime',
+    label: '联系地址',
+    placeholder: '联系地址',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入联系地址',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '法人代表',
+    placeholder: '法人代表',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入法人代表',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '法人代表电话',
+    placeholder: '法人代表电话',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入法人代表电话',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '安全管理员',
+    placeholder: '安全管理员',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入安全管理员',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '安全管理员电话',
+    placeholder: '安全管理员电话',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入安全管理员电话',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_online',
+    type: 'cascader',
+    label: '所在城市/地区',
+    placeholder: '请选择',
+    colWidth: 24,
+    rules: [{
+      required: true,
+      message: '请选择所在城市/地区',
+      trigger: 'change'
+    }],
+    options: urbanArea(),
+  },{
+    field: 'T_sn',
+    label: '备注',
+    placeholder: '备注',
+    type: 'textarea',
+    colWidth: 24,
+  }, {
+    label: '《道路运输经营许可证》信息',
+    type: 'divider',
+    colWidth: 24,
+  }, {
+    field: 'T_sn',
+    label: '运营许可证号',
+    placeholder: '运营许可证号',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入运营许可证号',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '发证单位',
+    placeholder: '发证单位',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入发证单位',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '发证日期',
+    placeholder: '发证日期',
+    type: 'time',
+    colWidth: 12,
+    rules: [{
+      type: 'date',
+      required: true,
+      message: '请选择发证日期',
+      trigger: 'change'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '经营范围',
+    placeholder: '经营范围',
+    type: 'input',
+    colWidth: 12,
+    rules: [{
+      required: true,
+      message: '请输入经营范围',
+      trigger: 'blur'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '资质开始时间',
+    placeholder: '资质开始时间',
+    type: 'time',
+    colWidth: 12,
+    rules: [{
+      type: 'date',
+      required: true,
+      message: '请选择资质开始时间',
+      trigger: 'change'
+    }]
+  }, {
+    field: 'T_sn',
+    label: '资质截止时间',
+    placeholder: '资质截止时间',
+    type: 'time',
+    colWidth: 12,
+    rules: [{
+      type: 'date',
+      required: true,
+      message: '请选择资质截止时间',
+      trigger: 'change'
+    }]
+  }, {
+    label: '附件',
+    type: 'divider',
+    colWidth: 24,
+  }, {
+    field: 'T_sn',
+    label: '营业执照',
+    type: 'upload',
+    colWidth: 6,
+    rules: [{
+      required: true,
+      message: '请选择营业执照',
+      trigger: 'blur'
+    }],
+  }, {
+    field: 'T_sn',
+    label: '道路运输经营许可证',
+    type: 'upload',
+    colWidth: 6,
+    rules: [{
+      required: true,
+      message: '请选择道路运输经营许可证',
+      trigger: 'blur'
+    }],
+  }]
+}

src/views/Login.vue → src/views/user/Login.vue

@@ -2,7 +2,7 @@
   <div class="login-wrapper">
     <div class="login-main">
       <div class="login_head">
-        <img class="iamge_logo" src="../../public/logo.png" alt="" />
+        <img class="iamge_logo" src="../../../public/logo.png" alt="" />
         <div class="headline_login">气瓶后台管理系统</div>
       </div>
       <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
@@ -64,7 +64,7 @@
         btnTxt: '获取验证码',
         disabled: false,
         time: null,
-        browserId: '',
+        browserId: '123456',
       }
     },
     mounted() {},
@@ -145,6 +145,9 @@
         Cookies.set('T_uuid', this.browserId, {
           expires: 1
         })
+        Cookies.set('T_tokey', this.browserId, {
+          expires: 1
+        })
         this.$router.push('/');
       }
     },