Просмотр исходного кода

Merge branch 'deploy' of http://git.chelingzhu.com/chelingzhu-web/zxyj-admin-html into deploy

lilei 4 лет назад
Родитель
Сommit
0bb7b6e4f6

+ 5 - 0
package-lock.json

@@ -3656,6 +3656,11 @@
       "integrity": "sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==",
       "dev": true
     },
+    "china-division": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/china-division/-/china-division-2.3.1.tgz",
+      "integrity": "sha512-mOfLagVRZ+lRmbIIZ0sci0+9Sr+uGyPCp9an4Orov2KxLf3DGSB/4qyao/jy3pegW4Weppvh0yzGfs+dAPJA7A=="
+    },
     "chokidar": {
       "version": "2.1.8",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",

+ 1 - 0
package.json

@@ -17,6 +17,7 @@
     "@antv/data-set": "^0.10.2",
     "ant-design-vue": "^1.6.5",
     "axios": "^0.19.0",
+    "china-division": "^2.3.1",
     "core-js": "2.6.9",
     "enquire.js": "^2.1.6",
     "lodash.get": "^4.4.2",

+ 37 - 0
src/api/address.js

@@ -0,0 +1,37 @@
+import provinces from 'china-division/dist/provinces.json'
+import cities from 'china-division/dist/cities.json'
+import areas from 'china-division/dist/areas.json'
+
+areas.forEach((area) => {
+  const matchCity = cities.filter(city => city.code === area.cityCode)[0]
+  if (matchCity) {
+    matchCity.children = matchCity.children || []
+    matchCity.children.push({
+      label: area.name,
+      value: area.code
+    })
+  }
+})
+
+cities.forEach((city) => {
+  const matchProvince = provinces.filter(province => province.code === city.provinceCode)[0]
+  if (matchProvince) {
+    matchProvince.children = matchProvince.children || []
+    matchProvince.children.push({
+      label: city.name,
+      value: city.code,
+      children: city.children
+    })
+  }
+})
+
+const options = provinces.map(province => ({
+  label: province.name,
+  value: province.code,
+  children: province.children
+}))
+export const province = provinces
+export const city = cities
+export const area = areas
+
+export default options

+ 11 - 1
src/config/router.config.js

@@ -174,13 +174,23 @@ export const asyncRouterMap = [{
       {
         path: '/equipmentManage/network',
         name: 'network',
-        component: () => import(/* webpackChunkName: "tenants" */ '@/views/equipmentManage/network.vue'),
+        component: () => import(/* webpackChunkName: "tenants" */ '@/views/equipmentManage/network/network.vue'),
         meta: {
           title: '网点管理',
           icon: 'profile'
           // permission: 'M_tenants_list'
         }
       },
+      {
+        path: '/equipmentManage/equipment',
+        name: 'equipment',
+        component: () => import(/* webpackChunkName: "tenants" */ '@/views/equipmentManage/equipment/equipment.vue'),
+        meta: {
+          title: '设备管理',
+          icon: 'profile'
+          // permission: 'M_tenants_list'
+        }
+      },
       {
 			  path: '/equipmentManage/openTimeSetting',
 			  name: 'openTimeSetting',

+ 172 - 0
src/views/equipmentManage/equipment/equipment.vue

@@ -0,0 +1,172 @@
+<template>
+  <a-card :bordered="false" class="network-table-page-search-wrapper">
+    <div class="network-searchForm">
+      <a-form layout="inline" :form="form" ref="form" v-bind="formItemLayout" @keyup.enter.native="$refs.table.refresh(true)">
+        <a-row :gutter="48">
+          <a-col :span="6">
+            <a-form-item label="设备编号" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+              <a-input id="network-equipmentNo" allowClear :maxLength="30" v-decorator="[ 'queryParam.equipmentNo', { initialValue: queryParam.equipmentNo, getValueFromEvent: $filterEmpty, rules: [] }]" placeholder="请输入网点名称" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="网点名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+              <a-input id="network-networkName" allowClear :maxLength="30" v-decorator="[ 'queryParam.networkName', { initialValue: queryParam.networkName, getValueFromEvent: $filterEmpty, rules: [] }]" placeholder="请输入网点名称" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-button class="handle-btn serach-btn" id="network-btn-serach" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+            <a-button class="handle-btn" type="" id="network-btn-reset" @click="handleReset">重置</a-button>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!-- 合计 -->
+    <div class="total">
+      <a-icon type="info-circle" class="iconImg" />
+      <strong>总计:</strong><span v-model="orderTotal">{{ orderTotal || 0 }} 条</span>
+    </div>
+    <s-table
+      ref="table"
+      size="default"
+      :rowKey="(record) => record.id"
+      :columns="columns"
+      :data="loadData"
+      bordered>
+      <!-- 操作 -->
+      <template slot="action" slot-scope="text, record">
+        <!-- <a-icon type="edit" id="network-handleEdit" title="编辑" class="actionBtn icon-orange" @click="handleEdit(record)" /> -->
+        <a-button
+          type="primary"
+          class="btn-edit-s"
+          id="organization-edit"
+          @click="checkLog(record)">掉线日志</a-button>
+      </template>
+    </s-table>
+    <!-- 掉线日志 -->
+    <equipmentLogModal :openModal="openLogModal" :equipmentId="equipmentId" @close="openLogModal=false" />
+  </a-card>
+</template>
+
+<script>
+import { STable, VSelect } from '@/components'
+import equipmentLogModal from './logModal.vue'
+export default {
+  name: 'Equipment',
+  components: { STable, VSelect, equipmentLogModal },
+  data () {
+    return {
+      form: this.$form.createForm(this),
+      formItemLayout: {
+        labelCol: { span: 7 },
+        wrapperCol: { span: 17 }
+      },
+      // 查询参数
+      queryParam: {
+        equipmentNo: '', // 设备编号
+        networkName: '' //  网点名称
+      },
+      // 表头
+      columns: [
+        { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
+        { title: '网点名称', dataIndex: 'networkName', width: 200, align: 'center' },
+        { title: '地址', dataIndex: 'address', width: 200, align: 'center' },
+        { title: '设备编号', dataIndex: 'equipmentNo', width: 200, align: 'center' },
+        { title: '箱体类型', dataIndex: 'type', width: 200, align: 'center' },
+        { title: '内置箱体数', dataIndex: 'boxNum', width: 200, align: 'center' },
+        { title: '内置各箱体已投放比例(%)',
+          children: [
+            { title: '1号箱', dataIndex: 'oProportion', width: 100, align: 'center' },
+            { title: '2号箱', dataIndex: 'tProportion', width: 100, align: 'center' }
+          ]
+        },
+        { title: '版本', dataIndex: 'edition', width: 200, align: 'center' },
+        { title: '状态', dataIndex: 'status', width: 100, align: 'center' },
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: 240, align: 'center' }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        // return getTenantsList(Object.assign(parameter, this.queryParam)).then(res => {
+        //   if (res.status == 200) {
+        //     const no = (res.data.pageNo - 1) * res.data.pageSize
+        //     for (let i = 0; i < res.data.list.length; i++) {
+        //       const _item = res.data.list[i]
+        //       _item.no = no + i + 1
+        //       _item.status = _item.status + '' === '1'
+        //     }
+        //     return res.data
+        //   }
+        // })
+        return new Promise((resolve) => {
+          const data = [
+            { id: 1, no: 1, networkName: '网点1', equipmentNo: '陕西省', type: '西安市', boxNum: '未央区', address: '凤城十二路', oProportion: '早高峰期', tProportion: '23%', edition: '1.2.1', status: '1' },
+            { id: 2, no: 2, networkName: '网点2', equipmentNo: '陕西省', type: '西安市', boxNum: '未央区', address: '凤城十二路', oProportion: '晚高峰期', tProportion: '23%', edition: '1.2.1', status: '1' },
+            { id: 3, no: 3, networkName: '网点3', equipmentNo: '陕西省', type: '西安市', boxNum: '未央区', address: '凤城十二路', oProportion: '早高峰期', tProportion: '23%', edition: '1.2.1', status: '1' },
+            { id: 4, no: 4, networkName: '网点4', equipmentNo: '陕西省', type: '西安市', boxNum: '未央区', address: '凤城十二路', oProportion: '早高峰期', tProportion: '23%', edition: '1.2.1', status: '1' },
+            { id: 5, no: 5, networkName: '网点5', equipmentNo: '陕西省', type: '西安市', boxNum: '未央区', address: '凤城十二路', oProportion: '早高峰期', tProportion: '23%', edition: '1.2.1', status: '1' },
+            { id: 6, no: 6, networkName: '网点6', equipmentNo: '陕西省', type: '西安市', boxNum: '未央区', address: '凤城十二路', oProportion: '早高峰期', tProportion: '23%', edition: '1.2.1', status: '1' },
+            { id: 7, no: 7, networkName: '网点7', equipmentNo: '陕西省', type: '西安市', boxNum: '未央区', address: '凤城十二路', oProportion: '早高峰期', tProportion: '23%', edition: '1.2.1', status: '1' }
+          ]
+          resolve(data)
+        })
+      },
+      orderTotal: '', // 合计开单数量
+      openLogModal: false, //  掉线日志 弹框
+      equipmentId: null //  设备id
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.handleReset()
+    })
+  },
+  methods: {
+    // 重置
+    handleReset () {
+      console.log('重置', this.queryParam)
+      this.form.resetFields()
+      this.$refs.table.refresh(true)
+    },
+    //  查看掉线日志
+    checkLog (row) {
+      this.equipmentId = row ? row.id : null
+      this.openLogModal = true
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+  .network-table-page-search-wrapper{
+    .network-searchForm{
+      .ant-form-inline .ant-form-item{
+        width: 100%;
+      }
+      // 搜索框的下间距
+      .ant-form-item {
+      	margin-bottom: 10px;
+      }
+      .handle-btn{
+        margin-top: 4px;
+      }
+      .serach-btn{
+        margin-right: 10px;
+      }
+    }
+    .actionBtn {
+    	font-size: 20px;
+    	padding: 0 10px;
+    }
+    // 合计
+    .total {
+    	margin: 15px 0 25px;
+    	width: 100%;
+    	background-color: #e6f7ff;
+    	border: 1px solid #91d5ff;
+    	padding: 8px 15px 8px 27px;
+    	border-radius: 4px;
+    	.iconImg {
+    		color: #1890FF;
+    		margin-right: 10px;
+    	}
+    }
+  }
+</style>

+ 154 - 0
src/views/equipmentManage/equipment/logModal.vue

@@ -0,0 +1,154 @@
+<template>
+  <a-modal
+    centered
+    class="equipment-log-modal"
+    :footer="null"
+    :maskClosable="false"
+    :title="modalTit"
+    v-model="isShow"
+    @cancle="isShow=false"
+    :width="1000">
+    <!-- 查询条件 -->
+    <a-form
+      id="logistics-form"
+      :form="form"
+      ref="form"
+      v-bind="formItemLayout">
+      <a-row :gutter="48">
+        <a-col :span="8">
+          <a-form-item label="离线时间" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+            <a-range-picker
+              id="equipment-log-time"
+              v-model="time"
+              :format="dateFormat"
+              :placeholder="['开始时间','结束时间']"
+              :disabledDate="disabledDate"
+              @change="onChange" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-button class="handle-btn serach-btn" id="network-btn-serach" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+        </a-col>
+      </a-row>
+    </a-form>
+    <!-- 掉线记录 -->
+    <s-table
+      ref="table"
+      size="default"
+      :rowKey="(record) => record.id"
+      :columns="columns"
+      :data="loadData"
+      bordered></s-table>
+  </a-modal>
+</template>
+
+<script>
+import getDate from '@/libs/getDate.js'
+import moment from 'moment'
+import { STable } from '@/components'
+export default {
+  name: 'EquipmentModal',
+  components: { STable },
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    equipmentId: {
+      type: [Number, String],
+      default: ''
+    }
+  },
+  computed: {
+    modalTit () {
+      return this.equipmentId + '-掉线日志'
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      form: this.$form.createForm(this),
+      formItemLayout: {
+        labelCol: { span: 7 },
+        wrapperCol: { span: 17 }
+      },
+      // 查询参数
+      queryParam: {
+        beginDate: null, // 开始时间
+        endDate: null // 结束时间
+      },
+      // 将默认当天时间日期回显在时间选择框中
+      time: [
+        moment(getDate.getToday().starttime, this.dateFormat),
+        moment(getDate.getToday().endtime, this.dateFormat)
+      ],
+      dateFormat: 'YYYY-MM-DD',
+      // 表头
+      columns: [
+        { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
+        { title: '离线时间', dataIndex: 'orderDate', width: 200, align: 'center' }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        // return getTenantsList(Object.assign(parameter, this.queryParam)).then(res => {
+        //   if (res.status == 200) {
+        //     const no = (res.data.pageNo - 1) * res.data.pageSize
+        //     for (let i = 0; i < res.data.list.length; i++) {
+        //       const _item = res.data.list[i]
+        //       _item.no = no + i + 1
+        //       _item.status = _item.status + '' === '1'
+        //     }
+        //     return res.data
+        //   }
+        // })
+        return new Promise((resolve) => {
+          const data = [
+            { id: 1, no: 1, orderDate: '2020-10-30 09:14' },
+            { id: 2, no: 2, orderDate: '2020-10-30 09:14' }
+          ]
+          resolve(data)
+        })
+      }
+    }
+  },
+  methods: {
+    moment,
+    // 不可选日期
+    disabledDate (date, dateStrings) {
+      return date && date.valueOf() > Date.now()
+    },
+    // 离线时间change
+    onChange (dates, dateStrings) {
+      if ((dates, dateStrings)) {
+        this.queryParam.beginDate = dateStrings[0]
+        this.queryParam.endDate = dateStrings[1]
+      }
+    },
+    //  获取详情
+    getDetails () {}
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+      }
+    },
+    equipmentId (newValue, oldValue) {
+      if (this.isShow && newValue) {
+        this.getDetails()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .equipment-log-modal{
+
+  }
+</style>

+ 0 - 8
src/views/equipmentManage/network.vue

@@ -1,8 +0,0 @@
-<template>
-</template>
-
-<script>
-</script>
-
-<style>
-</style>

+ 164 - 0
src/views/equipmentManage/network/detailsModal.vue

@@ -0,0 +1,164 @@
+<template>
+  <a-modal
+    centered
+    class="detail-network-modal"
+    :footer="null"
+    :maskClosable="false"
+    title="查看详情"
+    v-model="isShow"
+    @cancle="isShow=false"
+    :width="1000">
+    <!-- 网点信息 -->
+    <div>
+      <!-- <div v-if="detailsData"> -->
+      <a-row :gutter="35">
+        <a-col :span="8" class="item-cont">
+          <p class="item-label">网点名称:</p>
+          <p class="item-main">卡迪夫还是空见风使舵</p>
+        </a-col>
+        <a-col :span="16" class="item-cont">
+          <p class="item-label">地址:</p>
+          <p class="item-main">陕西省西安市未央区凤城八路爱打架个大神阿斯顿撒多</p>
+        </a-col>
+      </a-row>
+      <a-row :gutter="35">
+        <a-col :span="8" class="item-cont">
+          <p class="item-label">纬度:</p>
+          <p class="item-main">89.5645</p>
+        </a-col>
+        <a-col :span="8" class="item-cont">
+          <p class="item-label">经度:</p>
+          <p class="item-main">148.5478</p>
+        </a-col>
+        <a-col :span="8" class="item-cont">
+          <p class="item-label">投递时间段:</p>
+          <p class="item-main">上下班高峰期投放</p>
+        </a-col>
+      </a-row>
+    </div>
+    <a-divider />
+    <!-- 已绑设备 -->
+    <div>
+      <h3>已绑设备:</h3>
+      <a-table
+        ref="table"
+        size="middle"
+        :rowKey="record => record.id"
+        :columns="columns"
+        :dataSource="equipmentData"
+        :pagination="false"
+        bordered></a-table>
+    </div>
+    <div class="btn-cont"><a-button id="detail-network-modal-back" @click="isShow = false">返回列表</a-button></div>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: 'DetailsModal',
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    networkId: {
+      type: [Number, String],
+      default: ''
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      detailsData: null, //  网点数据
+      columns: [
+        { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
+        { title: '设备编号', dataIndex: 'equipmentNo', width: 200, align: 'center' },
+        { title: '设备状态', dataIndex: 'equipmentStatus', width: 200, align: 'center' },
+        { title: '投放情况', dataIndex: 'situation', width: 200, align: 'center' },
+        { title: '箱体类型', dataIndex: 'type', width: 200, align: 'center' }
+      ],
+      equipmentData: [
+        { id: 1, no: 1, equipmentNo: 'hgd13612875712', equipmentStatus: '1', situation: '41%-12%-21%-0%', type: '咸阳二代箱体' }
+      ]
+    }
+  },
+  methods: {
+    //  获取详情
+    getDetails () {}
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+      }
+    },
+    networkId (newValue, oldValue) {
+      if (this.isShow && newValue) {
+        this.getDetails()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .detail-network-modal{
+    .ant-modal-body {
+    	padding: 40px 40px 24px;
+    }
+    .item-cont {
+    	margin-bottom: 15px;
+    	display: flex;
+    	.item-label {
+    		width: 115px;
+    		font-size: 14px;
+    		color: rgba(0, 0, 0, 0.85);
+    		flex-shrink: 0;
+    	}
+    	.item-main {
+    		flex-grow: 1;
+        word-break: break-all;
+    		.wd-icon {
+    			display: block;
+    		}
+    	}
+    	.guidance-con {
+    		border: 1px dashed #e8e8e8;
+    		border-radius: 6px;
+    		padding: 20px;
+    		img {
+    			max-width: 100%;
+    		}
+    	}
+    	.period-price-con {
+    		border-bottom: 1px solid #e8e8e8;
+    	}
+    	.item-period {
+    		display: flex;
+    		align-items: center;
+    		justify-content: space-evenly;
+    		flex-grow: 1;
+    		border: 1px solid #e8e8e8;
+    		border-width: 1px 1px 0;
+    		text-align: center;
+    		.period,
+    		.period-price {
+    			padding: 5px 0;
+    			border-right: 1px solid #e8e8e8;
+    		}
+    		.period-price:last-child {
+    			border-right: none;
+    		}
+    	}
+    }
+    .btn-cont {
+    	text-align: center;
+    	margin: 35px 0 10px;
+    }
+  }
+</style>

+ 197 - 0
src/views/equipmentManage/network/editModal.vue

@@ -0,0 +1,197 @@
+<template>
+  <a-modal
+    centered
+    class="edit-network-modal"
+    :footer="null"
+    :maskClosable="false"
+    :title="modalTit"
+    v-model="isShow"
+    @cancle="isShow=false"
+    :width="1000">
+    <a-form
+      id="logistics-form"
+      :form="form"
+      ref="form"
+      v-bind="formItemLayout"
+      @submit="handleSubmit">
+      <a-form-item label="网点名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+        <a-input
+          id="logistics-name"
+          :maxLength="30"
+          v-decorator="[
+            'formData.name',
+            { initialValue: formData.name, getValueFromEvent: $filterEmpty, rules: [{ required: true, message: '请输入网点名称' }] }
+          ]"
+          placeholder="请输入网点名称(最多30个字符)"
+          allowClear />
+      </a-form-item>
+      <a-form-item label="地址" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+        <a-cascader
+          id="network-areas"
+          v-decorator="[
+            'options',
+            {initialValue: areas,
+             rules: [{ required: true, message: '请选择省市区' }]}
+          ]"
+          :options="options"
+          placeholder="请选择省市区" />
+      </a-form-item>
+      <a-form-item label="详细地址" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+        <a-input
+          id="logistics-address"
+          :maxLength="30"
+          v-decorator="[
+            'formData.address',
+            { initialValue: formData.address, getValueFromEvent: $filterEmpty, rules: [{ required: true, message: '请输入详细地址' }] }
+          ]"
+          placeholder="请输入详细地址(最多30个字符)"
+          allowClear />
+      </a-form-item>
+      <a-row :gutter="30">
+        <a-col :span="10">
+          <a-form-item label="纬度" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
+            <a-input
+              id="logistics-lat"
+              v-decorator="[
+                'formData.lat',
+                { initialValue: formData.lat, rules: [
+                  { required: true, message: '请输入纬度' },
+                  { pattern: new RegExp(/^d{1}$/), message: '请输入正确的纬度,整数部分为0~90,必须输入1到8位小数' }
+                ] }
+              ]"
+              placeholder="请输入纬度"
+              allowClear />
+              <!-- { pattern: '^[\-\+]?([0-8]?\d{1}\.\d{1,8}|90\.0{1,8})$', message: '请输入正确的纬度,整数部分为0~90,必须输入1到8位小数' } -->
+          </a-form-item>
+        </a-col>
+        <a-col :span="10">
+          <a-form-item label="经度" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
+            <a-input
+              id="logistics-lnt"
+              v-decorator="[
+                'formData.lnt',
+                { initialValue: formData.lnt, getValueFromEvent: $filterEmpty, rules: [
+                  { required: true, message: '请输入经度' },
+                  { pattern: '^[\-\+]?(0?\d{1,2}\.\d{1,8}|1[0-7]?\d{1}\.\d{1,8}|180\.0{1,8})$', message: '请输入正确的经度,整数部分为0~180,必须输入1到8位小数' }
+                ] }
+              ]"
+              placeholder="请输入经度"
+              allowClear />
+          </a-form-item>
+        </a-col>
+        <a-col :span="4">
+          <a href="https://lbs.qq.com/tool/getpoint/" target="_blank">
+            <a-button type="primary" id="logistics-search-jwd" class="logistics-search-jwd" size="small">查询坐标</a-button>
+          </a>
+        </a-col>
+      </a-row>
+      <a-form-item label="投递时间段" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+        <a-select
+          allowClear
+          v-decorator="[
+            'formData.deliver',
+            { initialValue: formData.deliver,
+              rules: [{ required: true, message: '请选择投递时间段' }] },
+          ]"
+          placeholder="请选择投递时间段"
+          @change="deliverChange"
+        >
+          <a-select-option v-for="(item,index) in deliverList" :key="index" :value="item.value">
+            {{ item.value }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
+        <a-button type="primary" html-type="submit" id="logistics-submit" style="margin-right: 15px">保存</a-button>
+        <a-button @click="isShow=false" style="margin-left: 15px" id="logistics-close">取消</a-button>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script>
+import addrData, { province, city, area } from '@/api/address'
+export default {
+  name: 'EditModal',
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    networkId: {
+      type: [Number, String],
+      default: ''
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      form: this.$form.createForm(this),
+      formItemLayout: {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 16 }
+      },
+      formData: {
+        name: null, //  网点名称
+        address: '', //  详细地址
+        lat: '', //  纬度
+        lnt: '', //  经度
+        deliver: undefined //  投递时间段
+      },
+      options: addrData, //  省市区下拉数据
+      areas: [], //  省市区 值
+      deliverList: [] //  投递时间段下拉数据
+    }
+  },
+  computed: {
+    modalTit () {
+      return this.networkId ? '编辑' : '新增'
+    }
+  },
+  methods: {
+    //  获取详情
+    getDetails () {},
+    //  物流信息  保存
+    handleSubmit (e) {
+      e.preventDefault()
+      const _this = this
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.$emit('success')
+        }
+      })
+    },
+    //  投递时间段  change
+    deliverChange (val) {
+
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+      } else {
+        this.form.resetFields()
+      }
+    },
+    networkId (newValue, oldValue) {
+      if (this.isShow && newValue) {
+        this.getDetails()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .edit-network-modal{
+    .logistics-search-jwd{
+      margin-top: 8px;
+    }
+  }
+</style>

+ 287 - 0
src/views/equipmentManage/network/equipmentModal.vue

@@ -0,0 +1,287 @@
+<template>
+  <a-modal
+    centered
+    class="edit-network-modal"
+    :footer="null"
+    :maskClosable="false"
+    title="绑定箱体设备"
+    v-model="isShow"
+    @cancle="isShow=false"
+    :width="1000">
+    <!-- 搜索设备 -->
+    <div class="search-con" @blur="isFocus=false">
+      <a-input-search
+        id="equipment-search"
+        class="search-s"
+        allow-clear
+        placeholder="请通过设备编号搜索"
+        enter-button="查询"
+        size="large"
+        @blur="noData=0"
+        @focus="isFocus=true"
+        @search="onSearch"
+      />
+      <a-card class="search-sub" :bordered="false">
+        <div class="noData" v-if="noData==1" style="text-align: center;">未查询到结果</div>
+        <div class="search-sub-item" v-if="resultData && isFocus">
+          <p>{{ resultData.name }}</p>
+          <a-button
+            id="equipment-bind"
+            v-if="!resultData.params"
+            type="primary"
+            ghost
+            size="small"
+            @click="onBundling(resultData)">立即绑定</a-button>
+          <a-button v-else disabled type="link">已绑定</a-button>
+        </div>
+      </a-card>
+    </div>
+    <!-- 已绑设备 -->
+    <div class="eq-tit">已绑设备:</div>
+    <a-table
+      class="table"
+      ref="table"
+      bordered
+      size="small"
+      :rowKey="(record) => record.id"
+      :columns="columns"
+      :data-source="equipmentData"
+      :pagination="false">
+      <!-- 箱体类型 -->
+      <template slot="type" slot-scope="record">
+        <a-select
+          allowClear
+          placeholder="请选择箱体类型"
+          style="width: 100%;"
+          @change="typeChange">
+          <a-select-option v-for="(item,index) in typeList" :key="index" :value="item.value">
+            {{ item.value }}
+          </a-select-option>
+        </a-select>
+      </template>
+      <!-- 工作状态 -->
+      <template slot="workStatus" slot-scope="record">
+        <a-switch
+          checkedChildren="启用"
+          unCheckedChildren="禁用"
+          id="bannerSetting-changeFlagHandle"
+          v-model="record.workStatus == 1 ? true : false"
+          @change="changeFlagHandle(record)"
+        />
+      </template>
+      <!-- 操作 -->
+      <template slot="action" slot-scope="record">
+        <a-button
+          type="primary"
+          ghost
+          size="small"
+          id="equipment-unBind"
+          @click="onUnbundling(record)">解绑</a-button>
+      </template>
+    </a-table>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: 'EquipmentModal',
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    networkId: {
+      type: [Number, String],
+      default: ''
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      resultData: null, //  设备搜索结果
+      noData: 0,
+      isFocus: false, //  搜索框是否获取焦点
+      columns: [
+        { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
+        { title: '设备编号', dataIndex: 'equipmentNo', width: 100, align: 'center' },
+        { title: '设备状态', dataIndex: 'equipmentStatus', width: 150, align: 'center' },
+        { title: '投放情况', dataIndex: 'putIn', width: 150, align: 'center' },
+        { title: '箱体类型', scopedSlots: { customRender: 'type' }, width: 150, align: 'center' },
+        { title: '工作状态', scopedSlots: { customRender: 'workStatus' }, width: 150, align: 'center' },
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: 80, align: 'center' }
+      ],
+      equipmentData: [
+        { id: 1, no: 1, equipmentNo: 'x13132', equipmentStatus: '1', putIn: '10%-34%-0%-98%', type: '咸阳二代新箱体', workStatus: '1' },
+        { id: 2, no: 2, equipmentNo: 'x23132', equipmentStatus: '1', putIn: '10%-34%-0%-98%', type: '咸阳二代新箱体', workStatus: '1' },
+        { id: 3, no: 3, equipmentNo: 'x33132', equipmentStatus: '1', putIn: '10%-34%-0%-98%', type: '咸阳二代新箱体', workStatus: '2' },
+        { id: 4, no: 4, equipmentNo: 'x43132', equipmentStatus: '1', putIn: '10%-34%-0%-98%', type: '咸阳二代新箱体', workStatus: '1' }
+      ],
+      typeList: [] //  箱体类型
+    }
+  },
+  methods: {
+    //  获取详情
+    getDetails () {},
+    //  搜索设备
+    onSearch (value) {
+      if (value) {
+        // findVsDevice({ id: value }).then(res => {
+        //   if (res.status == 200) {
+        //     if (res.data) {
+        this.noData = 2
+        // this.resultData = res.data
+        //     } else {
+        //       this.noData = 1
+        //       this.resultData = null
+        //     }
+        //   }
+        // })
+      } else {
+        this.noData = 0
+        this.resultData = null
+        this.isFocus = false
+      }
+    },
+    //  门店已绑设备
+    getStoreEquipment (id) {
+      // findStoreVsDevice({ code: id }).then(res => {
+      //   if (res.status == 200) {
+      //     res.data.map((item, ind) => {
+      //       item.no = ind + 1
+      //     })
+      //     this.equipmentData = res.data
+      //   }
+      // })
+    },
+    //  解绑
+    onUnbundling (item) {
+      const _this = this
+      _this.$confirm({
+        title: '提示',
+        centered: true,
+        content: '确定解绑该设备吗?',
+        onOk () {
+          // unbindVsDevice({ id: item.id }).then(res => {
+          //   if (res.status == 200) {
+          //     _this.$message.success(res.message)
+          //     _this.getStoreEquipment(_this.storeCode)
+          //   }
+          // })
+        }
+      })
+    },
+    //  绑定
+    onBundling (item) {
+      const _this = this
+      _this.$confirm({
+        title: '提示',
+        centered: true,
+        content: '确定要绑定该设备吗?',
+        onOk () {
+          // bindVsDevice({ storeCode: _this.storeCode, vsDeviceId: item.id }).then(res => {
+          //   if (res.status == 200) {
+          //     _this.$message.success(res.message)
+          //     _this.expandedRowKeys = []
+          //     _this.resultData = null
+          //     _this.isFocus = false
+          //     _this.getStoreEquipment(_this.storeCode)
+          //   }
+          // })
+        }
+      })
+    },
+    //  箱体类型 change
+    typeChange (val) {
+      console.log(val)
+    },
+    // 更改启用禁用状态
+    changeFlagHandle (record) {
+      const _data = {
+        id: record.id,
+        flag: record.workStatus == 1 ? '0' : '1'
+      }
+      // changeStatus(_data).then(res => {
+      //   if (res.status == 200) {
+      //     this.$message.success(res.message)
+      //     this.$refs.table.refresh()
+      //   } else {
+      //     record.status = !record.status
+      //   }
+      // })
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+      }
+    },
+    networkId (newValue, oldValue) {
+      if (this.isShow && newValue) {
+        this.getDetails()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .edit-network-modal{
+    .search-con{
+      position: relative;
+      .search-s{
+        .ant-input-group-addon{
+          padding: 0;
+          border: none;
+        }
+      }
+      .search-sub{
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        position: absolute;
+        left: 0;
+        top: 45px;
+        width: 100%;
+        z-index: 1;
+        border-radius: 6px;
+        .ant-card-body{
+          padding: 15px 24px;
+        }
+        .search-sub-item{
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 8px 0;
+          border-bottom: 1px dashed #f8f8f8;
+          p{
+            margin: 0;
+          }
+          &:last-child{
+            border-bottom: none;
+          }
+        }
+      }
+    }
+    .eq-tit{
+      line-height: 40px;
+      font-size: 16px;
+      margin: 85px 0 5px;
+    }
+    .eq-subTit{
+      margin: 0 0 10px;
+    }
+    .table{
+      padding-bottom: 50px;
+    }
+  }
+  .btn-cont{
+    text-align: center;
+    .cancel{
+      margin-left: 40px;
+    }
+  }
+</style>

+ 241 - 0
src/views/equipmentManage/network/network.vue

@@ -0,0 +1,241 @@
+<template>
+  <a-card :bordered="false" class="network-table-page-search-wrapper">
+    <div class="network-searchForm">
+      <a-form layout="inline" :form="form" ref="form" v-bind="formItemLayout" @keyup.enter.native="$refs.table.refresh(true)">
+        <a-row :gutter="48">
+          <a-col :span="6">
+            <a-form-item label="创建时间" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+              <a-range-picker
+                id="network-time"
+                v-model="time"
+                :format="dateFormat"
+                :placeholder="['开始时间','结束时间']"
+                :disabledDate="disabledDate"
+                @change="onChange" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="网点名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+              <a-input id="network-networkName" allowClear :maxLength="30" v-decorator="[ 'queryParam.networkName', { initialValue: queryParam.networkName, getValueFromEvent: $filterEmpty, rules: [] }]" placeholder="请输入网点名称" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="区域" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+              <a-cascader
+                id="network-areas"
+                v-decorator="[
+                  'options',
+                  {initialValue: areas,
+                   rules: []}
+                ]"
+                :options="options"
+                placeholder="请选择省市区" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-button class="handle-btn serach-btn" id="network-btn-serach" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+            <a-button class="handle-btn" type="" id="network-btn-reset" @click="handleReset">重置</a-button>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <a-divider />
+    <div class="table-operator">
+      <a-button class="add-btn" id="network-btn-add" type="primary" :loading="loading" @click="handleEdit">新增网点</a-button>
+    </div>
+    <!-- 合计 -->
+    <div class="total">
+      <a-icon type="info-circle" class="iconImg" />
+      <strong>总计:</strong><span v-model="orderTotal">{{ orderTotal || 0 }} 条</span>
+    </div>
+    <s-table
+      ref="table"
+      size="default"
+      :rowKey="(record) => record.id"
+      :columns="columns"
+      :data="loadData"
+      bordered>
+      <!-- 操作 -->
+      <template slot="action" slot-scope="text, record">
+        <a-icon type="eye" id="network-handleView" title="详情" class="actionBtn icon-green" @click="handleView(record)" />
+        <a-icon type="edit" id="network-handleEdit" title="编辑" class="actionBtn icon-blues" @click="handleEdit(record)" />
+        <a-badge count="5">
+          <a-icon type="link" id="network-handleLink" title="关联箱体设备" class="actionBtn icon-orange" @click="handleBind(record)" />
+        </a-badge>
+      </template>
+    </s-table>
+    <!-- 新增编辑 -->
+    <editNetworkModal :openModal="openNetworkModal" :networkId="networkId" @success="handleReset" @close="openNetworkModal=false" />
+    <!-- 详情 -->
+    <detailsNetworkModal :openModal="openDetailModal" :networkId="networkId" @close="openDetailModal=false" />
+    <!-- 绑定箱体设备 -->
+    <equipmentModal :openModal="openBindModal" :networkId="networkId" @close="openBindModal=false" />
+  </a-card>
+</template>
+
+<script>
+import { STable, VSelect } from '@/components'
+import addrData, { province, city, area } from '@/api/address'
+import getDate from '@/libs/getDate.js'
+import moment from 'moment'
+import editNetworkModal from './editModal.vue'
+import detailsNetworkModal from './detailsModal.vue'
+import equipmentModal from './equipmentModal.vue'
+export default {
+  name: 'Network',
+  components: { STable, VSelect, editNetworkModal, detailsNetworkModal, equipmentModal },
+  data () {
+    return {
+      form: this.$form.createForm(this),
+      formItemLayout: {
+        labelCol: { span: 7 },
+        wrapperCol: { span: 17 }
+      },
+      // 查询参数
+      queryParam: {
+        beginDate: null, // 开始时间
+        endDate: null, // 结束时间
+        networkName: '', //  网点名称
+        province: null, //  省
+        city: null, // 市
+        area: null // 区
+      },
+      loading: false, // 导出loading
+      // 表头
+      columns: [
+        { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
+        { title: '创建时间', dataIndex: 'orderDate', width: 200, align: 'center' },
+        { title: '网点名称', dataIndex: 'networkName', width: 200, align: 'center' },
+        { title: '省', dataIndex: 'provinceName', width: 200, align: 'center' },
+        { title: '市', dataIndex: 'cityName', width: 200, align: 'center' },
+        { title: '区', dataIndex: 'areaName', width: 200, align: 'center' },
+        { title: '详细地址', dataIndex: 'address', width: 200, align: 'center' },
+        { title: '投放时间段名称', dataIndex: 'times', width: 220, align: 'center' },
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: 240, align: 'center' }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        // return getTenantsList(Object.assign(parameter, this.queryParam)).then(res => {
+        //   if (res.status == 200) {
+        //     const no = (res.data.pageNo - 1) * res.data.pageSize
+        //     for (let i = 0; i < res.data.list.length; i++) {
+        //       const _item = res.data.list[i]
+        //       _item.no = no + i + 1
+        //       _item.status = _item.status + '' === '1'
+        //     }
+        //     return res.data
+        //   }
+        // })
+        return new Promise((resolve) => {
+          const data = [
+            { id: 1, no: 1, orderDate: '2020-10-30 09:14', networkName: '网点1', provinceName: '陕西省', cityName: '西安市', areaName: '未央区', address: '凤城十二路', times: '早高峰期' },
+            { id: 2, no: 2, orderDate: '2020-10-30 09:14', networkName: '网点2', provinceName: '陕西省', cityName: '西安市', areaName: '未央区', address: '凤城十二路', times: '晚高峰期' },
+            { id: 3, no: 3, orderDate: '2020-10-30 09:14', networkName: '网点3', provinceName: '陕西省', cityName: '西安市', areaName: '未央区', address: '凤城十二路', times: '早高峰期' },
+            { id: 4, no: 4, orderDate: '2020-10-30 09:14', networkName: '网点4', provinceName: '陕西省', cityName: '西安市', areaName: '未央区', address: '凤城十二路', times: '早高峰期' },
+            { id: 5, no: 5, orderDate: '2020-10-30 09:14', networkName: '网点5', provinceName: '陕西省', cityName: '西安市', areaName: '未央区', address: '凤城十二路', times: '早高峰期' },
+            { id: 6, no: 6, orderDate: '2020-10-30 09:14', networkName: '网点6', provinceName: '陕西省', cityName: '西安市', areaName: '未央区', address: '凤城十二路', times: '早高峰期' },
+            { id: 7, no: 7, orderDate: '2020-10-30 09:14', networkName: '网点7', provinceName: '陕西省', cityName: '西安市', areaName: '未央区', address: '凤城十二路', times: '早高峰期' }
+          ]
+          resolve(data)
+        })
+      },
+      // 将默认当天时间日期回显在时间选择框中
+      time: [
+        moment(getDate.getToday().starttime, this.dateFormat),
+        moment(getDate.getToday().endtime, this.dateFormat)
+      ],
+      dateFormat: 'YYYY-MM-DD',
+      options: addrData, //  省市区下拉数据
+      areas: [], //  省市区 值
+      orderTotal: '', // 合计开单数量
+      openNetworkModal: false, //  新增编辑网点信息
+      networkId: null, //  网点id
+      openDetailModal: false, //  网点信息详情
+      openBindModal: false //  绑定箱体设备
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.handleReset()
+    })
+  },
+  methods: {
+    moment,
+    // 不可选日期
+    disabledDate (date, dateStrings) {
+      return date && date.valueOf() > Date.now()
+    },
+    // 创建时间change
+    onChange (dates, dateStrings) {
+      if ((dates, dateStrings)) {
+        this.queryParam.beginDate = dateStrings[0]
+        this.queryParam.endDate = dateStrings[1]
+      }
+    },
+    // 重置
+    handleReset () {
+      console.log('重置', this.queryParam)
+      this.queryParam.beginDate = getDate.getToday().starttime
+      this.queryParam.endDate = getDate.getToday().endtime
+      this.time = [
+        moment(getDate.getToday().starttime, this.dateFormat),
+        moment(getDate.getToday().endtime, this.dateFormat)
+      ]
+      this.areas = []
+      this.form.resetFields()
+      this.$refs.table.refresh(true)
+    },
+    //  新增、编辑网点
+    handleEdit (row) {
+      this.networkId = row ? row.id : null
+      this.openNetworkModal = true
+    },
+    //  查看详情
+    handleView (row) {
+      this.networkId = row ? row.id : null
+      this.openDetailModal = true
+    },
+    //  关联箱体设备
+    handleBind (row) {
+      this.networkId = row ? row.id : null
+      this.openBindModal = true
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+  .network-table-page-search-wrapper{
+    .network-searchForm{
+      .ant-form-inline .ant-form-item{
+        width: 100%;
+      }
+      // 搜索框的下间距
+      .ant-form-item {
+      	margin-bottom: 10px;
+      }
+      .handle-btn{
+        margin-top: 4px;
+      }
+      .serach-btn{
+        margin-right: 10px;
+      }
+    }
+    .actionBtn {
+    	font-size: 20px;
+    	padding: 0 10px;
+    }
+    // 合计
+    .total {
+    	margin: 15px 0 25px;
+    	width: 100%;
+    	background-color: #e6f7ff;
+    	border: 1px solid #91d5ff;
+    	padding: 8px 15px 8px 27px;
+    	border-radius: 4px;
+    	.iconImg {
+    		color: #1890FF;
+    		margin-right: 10px;
+    	}
+    }
+  }
+</style>

+ 2 - 6
src/views/shop/GoodsLogistics.vue

@@ -30,14 +30,14 @@
           :maxLength="30"
           v-decorator="[
             'formData.orderNo',
-            { initialValue: formData.orderNo, getValueFromEvent: $filterEmpty, rules: [{ required: true, message: '请输入运单编号(最多30个字符)' }] }
+            { initialValue: formData.orderNo, getValueFromEvent: $filterEmpty, rules: [{ required: true, message: '请输入运单编号' }] }
           ]"
           placeholder="请输入运单编号(最多30个字符)"
           allowClear />
       </a-form-item>
       <a-form-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
         <a-button type="primary" html-type="submit" id="logistics-submit" style="margin-right: 15px">保存</a-button>
-        <a-button @click="close" style="margin-left: 15px" id="logistics-close">取消</a-button>
+        <a-button @click="isShow=false" style="margin-left: 15px" id="logistics-close">取消</a-button>
       </a-form-item>
     </a-form>
   </a-modal>
@@ -78,10 +78,6 @@ export default {
           this.$emit('success')
         }
       })
-    },
-    //  取消
-    close () {
-      this.isShow = false
     }
   },
   watch: {

+ 1 - 1
src/views/shop/goodsEdit.vue

@@ -72,7 +72,7 @@
           allowClear
           id="goodsEdit-supplierName"
           placeholder="请选择供货商"
-          v-decorator="['formData.supplierName', { initialValue: formData.supplierName, rules: [{ required: true, message: '请选择商品分类' }] }]"
+          v-decorator="['formData.supplierName', { initialValue: formData.supplierName, rules: [{ required: true, message: '请选择供货商' }] }]"
         ></v-select>
       </a-form-item>
       <a-form-item label="商品详情" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">

+ 21 - 4
src/views/shop/goodsList.vue

@@ -8,6 +8,17 @@
               <a-input id="goodsList-name" allowClear v-decorator="[ 'queryParam.name', { initialValue: queryParam.name, getValueFromEvent: $filterEmpty, rules: [] }]" :maxLength="30" placeholder="请输入商品名称" />
             </a-form-item>
           </a-col>
+          <a-col :span="6">
+            <a-form-item label="商品分类" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+              <v-select
+                v-model="queryParam.goodsType"
+                ref="goodsStatus"
+                id="goodsList-type"
+                code="SETTLE_STATUS_ALL"
+                placeholder="请选择商品状态"
+                allowClear></v-select>
+            </a-form-item>
+          </a-col>
           <a-col :span="6">
             <a-form-item label="供货商" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
               <a-input id="goodsList-supplierName" allowClear v-decorator="[ 'queryParam.supplierName', { initialValue: queryParam.supplierName, getValueFromEvent: $filterEmpty, rules: [] }]" :maxLength="30" placeholder="请输入供货商" />
@@ -48,8 +59,9 @@
       </template>
       <!-- 操作 -->
       <template slot="action" slot-scope="text, record">
-        <a-icon title="编辑" type="edit" id="goodsList-btn-edit" class="actionBtn icon-blues" @click="handleGoods('edit', record)" />
-        <a-icon title="删除" type="delete" id="goodsList-btn-delect" class="actionBtn icon-red" @click="handleDel(record)" />
+        <a-button id="goodsList-btn-edit" class="icon-blues" type="link" @click="handleGoods('edit', record)">编辑</a-button>
+        <a-button id="goodsList-btn-shelves" class="icon-orange" type="link" @click="handleShelves(record)">上架</a-button>
+        <a-button id="goodsList-btn-delect" class="icon-red" type="link" @click="handleDel(record)">删除</a-button>
       </template>
     </s-table>
   </a-card>
@@ -67,6 +79,7 @@ export default {
       queryParam: {
         name: '', //  商品名称
         supplierName: '', //  供货商
+        goodsType: null, //  商品分类
         goodsStatus: '' // 商品状态
       },
       loading: false, // 导出loading
@@ -78,8 +91,8 @@ export default {
         { title: '供货商', dataIndex: 'orderNo', width: 200, align: 'center' },
         { title: '商品状态', scopedSlots: { customRender: 'orderStatus' }, width: 200, align: 'center' },
         { title: '库存数量', dataIndex: 'orderPrice', width: 200, align: 'center' },
-        { title: '已售数量', dataIndex: 'orderNum', width: 200, align: 'center' },
-        { title: '操作', scopedSlots: { customRender: 'action' }, width: 150, align: 'center' }
+        { title: '已售数量', dataIndex: 'orderNum', width: 100, align: 'center' },
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: 200, align: 'center' }
       ],
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
@@ -143,6 +156,10 @@ export default {
         }
       })
     },
+    //  上下架
+    handleShelves (row) {
+      console.log(row, '---上下架')
+    },
     // 重置
     handleReset () {
       this.queryParam.name = ''

+ 8 - 12
src/views/shop/shopOrder.vue

@@ -1,10 +1,10 @@
 <template>
   <a-card :bordered="false" class="shopOrder-table-page-search-wrapper">
     <div class="shopOrder-searchForm">
-      <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
+      <a-form layout="inline" :form="form" ref="form" v-bind="formItemLayout" @keyup.enter.native="$refs.table.refresh(true)">
         <a-row :gutter="48">
           <a-col :span="6">
-            <a-form-item label="下单时间" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+            <a-form-item label="下单时间" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
               <a-range-picker
                 id="shopOrder-time"
                 v-model="time"
@@ -15,17 +15,17 @@
             </a-form-item>
           </a-col>
           <a-col :span="6">
-            <a-form-item label="用户手机" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+            <a-form-item label="用户手机" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
               <a-input id="shopOrder-contactPhone" allowClear :maxLength="11" v-decorator="[ 'queryParam.contactPhone', { initialValue: queryParam.contactPhone, getValueFromEvent: $filterEmpty, rules: [] }]" placeholder="请输入用户手机" />
             </a-form-item>
           </a-col>
           <a-col :span="6">
-            <a-form-item label="订单编号" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+            <a-form-item label="订单编号" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
               <a-input id="shopOrder-orderNo" allowClear :maxLength="30" v-decorator="[ 'queryParam.orderNo', { initialValue: queryParam.orderNo, getValueFromEvent: $filterEmpty, rules: [] }]" placeholder="请输入订单编号" />
             </a-form-item>
           </a-col>
           <a-col :span="6">
-            <a-form-item label="订单状态" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+            <a-form-item label="订单状态" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
               <v-select
                 v-model="queryParam.orderStatus"
                 ref="orderStatus"
@@ -63,7 +63,7 @@
       </template>
       <!-- 操作 -->
       <template slot="action" slot-scope="text, record">
-        <a-icon type="eye" id="shopOrder-handleView" title="详情" class="actionBtn icon-green" @click="handleView(record)" />
+        <a-button id="shopOrder-handleView" type="link" @click="handleView(record)">详情</a-button>
       </template>
     </s-table>
   </a-card>
@@ -81,8 +81,8 @@ export default {
     return {
       form: this.$form.createForm(this),
       formItemLayout: {
-        labelCol: { span: 4 },
-        wrapperCol: { span: 16 }
+        labelCol: { span: 7 },
+        wrapperCol: { span: 17 }
       },
       // 查询参数
       queryParam: {
@@ -235,10 +235,6 @@ export default {
       color: #fff;
       border-color: #ff9900;
     }
-    .actionBtn {
-    	font-size: 20px;
-    	padding: 0 10px;
-    }
     .blue {
     	color: #1890FF;
     }