فهرست منبع

新增数字货架页面

zhangdan 3 سال پیش
والد
کامیت
e9ef231d89

+ 49 - 0
src/config/router.config.js

@@ -48,6 +48,55 @@ export const asyncRouterMap = [
         },
         hidden: true
       },
+      // 货架管理
+      {
+        path: '/numsGoodsShelves',
+        redirect: '/numsGoodsShelves/goodsShelvesAdministration',
+        component: PageView,
+        meta: {
+          title: '数字货架',
+          icon: 'hdd'
+          // permission: 'M_salesManagement'
+        },
+        children: [
+          {
+            path: '/numsGoodsShelves/goodsShelvesAdministration',
+            redirect: '/numsGoodsShelves/goodsShelvesAdministration/list',
+            name: 'goodsShelvesAdministration',
+            component: BlankLayout,
+            meta: {
+              title: '货架管理',
+              icon: 'monitor'
+              // permission: 'M_salesQueryList'
+            },
+            hideChildrenInMenu: true,
+            children: [
+              {
+                path: 'list',
+                name: 'goodsShelvesAdministrationList',
+                component: () => import('@/views/numsGoodsShelves/goodsShelvesAdministration/list.vue'),
+                meta: {
+                  title: '货架管理列表',
+                  icon: 'monitor',
+                  hidden: true
+                  // permission: 'M_salesQueryList'
+                }
+              },
+              {
+                path: 'set/:id',
+                name: 'goodsAllocationSet',
+                component: () => import('@/views/numsGoodsShelves/goodsShelvesAdministration/goodsAllocationSet.vue'),
+                meta: {
+                  title: '货位设置',
+                  hidden: true
+                  // permission: 'M_salesNew'
+                }
+              }
+            ]
+          }
+
+        ]
+      },
       // auth
       {
         path: '/auth',

+ 250 - 0
src/views/numsGoodsShelves/goodsShelvesAdministration/addGoodsShelve.vue

@@ -0,0 +1,250 @@
+<template>
+  <div>
+    <a-spin :spinning="spinning" tip="Loading...">
+      <a-modal
+        centered
+        wrapClassName="addGoodsShelve-modal"
+        :footer="null"
+        :maskClosable="false"
+        :title="titleText"
+        v-model="isshow"
+        @cancle="isshow=false"
+        :width="800">
+        <a-form-model
+          id="userEdit-form"
+          ref="ruleForm"
+          :model="form"
+          :rules="rules"
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+        >
+          <a-row :gutter="24">
+            <a-col :span="12">
+              <a-form-model-item label="配件经销商" prop="name">
+                <a-select
+                  placeholder="请选择数字货架提供方(输入名称查找)"
+                  id="userSyncEdit-roleNames"
+                  :disabled="nowData?true:false"
+                  allowClear
+                  v-model="form.roleNames"
+                  mode="multiple">
+                  <a-select-option v-for="item in roleList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item label="汽车修理厂" prop="phone">
+                <a-select
+                  style="background-color: none;"
+                  placeholder="请选择数字货架提供方(输入名称查找)"
+                  id="userSyncEdit-roleNames"
+                  :disabled="nowData?true:false"
+                  allowClear
+                  v-model="form.roleNames"
+                  mode="multiple">
+                  <a-select-option v-for="item in roleList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="20">
+            <a-col :span="24">
+              <a-form-model-item label="货架名称" prop="loginName" :label-col="{span: 3}" :wrapper-col="{span: 20}">
+                <a-input id="userEdit-loginName" v-model.trim="form.loginName":maxLength="50" allowClear placeholder="请输入货架名称(最多30个字符)"/>
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="24">
+            <!-- 状态 -->
+            <a-col :span="12">
+              <a-form-model-item label="货架归属" prop="loginFlag">
+                <a-radio-group name="radioGroup" v-model="form.loginFlag" @change="changeRadio">
+                  <a-radio :value="1">配件经销商</a-radio>
+                  <a-radio :value="0">汽车修理厂</a-radio>
+                </a-radio-group>
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="24" v-if="form.loginFlag===0">
+            <a-col :span="24">
+              <a-form-model-item label="产品图片" help="说明:最多5张。" :label-col="{span:3}" :wrapper-col="{span:20}">
+                <Upload
+                  class="upload"
+                  id="productInfoEdit-productMsg"
+                  v-model="form.productMsg"
+                  ref="productMsg"
+                  @change="changeImage"
+                  :maxNums="5"
+                  listType="picture-card" ></Upload>
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="24">
+            <a-col :span="24">
+              <a-form-model-item label="备注" prop="remarks" :label-col="{span: 3}" :wrapper-col="{span: 20}">
+                <a-textarea id="userEdit-remarks" v-model.trim="form.remarks":maxLength="500" allowClear placeholder="请输入备注(最多500个字符)"/>
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+          <a-form-model-item :label-col="{span: 0}" :wrapper-col="{span: 24}" style="text-align: center;">
+            <a-button type="primary" @click="handleSubmit()" :style="{ marginRight: '8px' }">保存</a-button>
+            <a-button :style="{ marginLeft: '8px' }" @click="isshow=false">取消</a-button>
+          </a-form-model-item>
+        </a-form-model>
+      </a-modal>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import { STable, VSelect, Upload } from '@/components'
+import { getRoleList, saveUserPower } from '@/api/power-user.js'
+export default {
+  name: 'UserModal',
+  components: {
+    STable, VSelect, Upload
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    nowData: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      spinning: false,
+      titleText: '新增数字货架',
+      isshow: this.visible,
+      roleList: [],
+      formItemLayout: {
+        labelCol: { span: 6 },
+        wrapperCol: { span: 16 }
+      },
+      form: {
+        name: '',
+        phone: '',
+        loginName: '',
+        sex: undefined,
+        loginFlag: '', // 状态
+        roleNames: undefined, // 角色
+        productMsg: '', // 图片
+        remarks: ''
+      },
+      rules: {
+        name: [ { required: true, message: '请输入用户名称', trigger: 'blur' }, { pattern: '^[^<|>]{1,30}$', message: '请输入不含<或>的字符,最多30个字符' } ],
+        phone: [ { required: true, message: '请输入手机号码', trigger: 'blur' }, { pattern: /^[1][0-9]{10}$/, message: '请输入正确的手机号码!' } ],
+        loginName: [ { required: true, message: '请输入用户账号', trigger: 'blur' }, { pattern: /^[0-9A-Za-z]+$/, message: '用户账号为数字或大小写字母组成!' } ],
+        sex: [ { required: true, message: '请选择性别', trigger: 'change' } ],
+        loginFlag: [ { required: true, message: '请选择状态', trigger: 'change' } ],
+        roleNames: [ { required: true, message: '请选择角色', trigger: 'change' } ]
+      }
+    }
+  },
+  methods: {
+    // 过滤空格
+    filterEmpty () {
+      let str = this.form.name
+      str = str.replace(/\ +/g, '')
+      str = str.replace(/[ ]/g, '')
+      str = str.replace(/[\r\n]/g, '')
+      this.form.name = str
+    },
+    // 产品图片上传
+    changeImage (file) {
+      this.form.productMsg = file
+    },
+    // 改变货架归属
+    changeRadio (e) {
+      this.form.loginFlag = e.target.value
+      console.log(e.target.value, '=========')
+    },
+    // 保存提交
+    handleSubmit () {
+      const _this = this
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const params = JSON.parse(JSON.stringify(_this.form))
+          params.roleNames = _this.form.roleNames.join(',')
+          params.id = _this.nowData && _this.nowData.id ? _this.nowData.id : null
+          params.ownerOrgFlag = _this.nowData && _this.nowData.ownerOrgFlag
+          _this.spinning = true
+          saveUserPower(params).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              _this.$emit('refresh')
+              setTimeout(function () {
+                _this.isshow = false
+                _this.spinning = false
+              }, 300)
+            } else {
+              _this.spinning = false
+            }
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    // 获取角色列表接口
+    getRoleList () {
+      getRoleList().then(res => {
+        if (res.status == 200) {
+          this.roleList = res.data
+        } else {
+          this.$message.warning(res.message)
+        }
+      })
+    }
+  },
+  watch: {
+    visible (newValue, oldValue) {
+      this.isshow = newValue
+    },
+    isshow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+        this.$refs.ruleForm.resetFields()
+        this.form.name = ''
+        this.form.phone = ''
+        this.form.loginName = ''
+        this.form.sex = undefined
+        this.form.loginFlag = ''
+        this.form.roleNames = undefined
+        this.form.remarks = ''
+        this.titleText = '新增用户'
+      } else {
+        this.getRoleList()
+      }
+    },
+    nowData: {
+      handler (newValue, oldValue) {
+        if (this.isshow && newValue) {
+          if (this.nowData.id) { //  编辑
+            this.titleText = '编辑数字货架'
+            this.form = Object.assign({}, this.nowData)
+            if (this.nowData.roleIds) {
+              this.form.roleNames = this.nowData.roleIds.split(',')
+            }
+            this.form.loginFlag = Number(this.nowData.loginFlag)
+          }
+        }
+      },
+      deep: true
+    }
+  }
+}
+</script>
+<style lang="less">
+.addGoodsShelve-modal{
+  .ant-select-disabled .ant-select-selection{
+    background-color: none !important;
+  }
+}
+</style>

+ 126 - 0
src/views/numsGoodsShelves/goodsShelvesAdministration/goodsAllocationSet.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="goodsAllocationSet-page">
+    <a-spin :spinning="spinning" tip="Loading...">
+      <a-page-header :ghost="false" :backIcon="false" class="goodsAllocationSet-baseInfo">
+        <template slot="subTitle">
+          <a href="javascript:;" @click="handleBack"><a-icon type="left"></a-icon> 返回列表</a>
+        </template>
+      </a-page-header>
+      <a-card :bordered="false" size="small" class="goodsAllocationSet-baseInfo">
+        <a-collapse :activeKey="['1']">
+          <a-collapse-panel key="1" header="基础信息">
+            <a-descriptions size="small" :column="3">
+              <a-descriptions-item label="货架名称">{{ }}</a-descriptions-item>
+              <a-descriptions-item label="配件经销商">{{ }}</a-descriptions-item>
+              <a-descriptions-item label="汽车修理厂">{{ }}</a-descriptions-item>
+            </a-descriptions>
+          </a-collapse-panel>
+        </a-collapse>
+      </a-card>
+      <a-card :bordered="false" size="small" class="pages-wrap">
+        <div class="goodsAllocationSet-baseInfo">
+          <a-button @click="handleExport" type="primary">导入货位</a-button>
+        </div>
+        <s-table
+          class="sTable fixPagination"
+          ref="table"
+          size="small"
+          rowKey="id"
+          :showPagination="false"
+          :columns="columns"
+          :data="loadData"
+          :defaultLoadData="false"
+          bordered>
+          <template slot="name" slot-scope="text, record">
+            <a-input allowClear placeholder="请输入货位号" v-if="isEdit" style="width: 80%;"/>
+            <span v-if="!isEdit">{{ record.name }}</span>
+          </template>
+          <template slot="status" slot-scope="text, record">
+            <a-button type="link" @click="handleEdit(record)" v-if="!isEdit">编辑</a-button>
+            <a-button type="link" @click="handleSave(record,0)" v-if="isEdit">保存</a-button>
+            <a-button type="link" @click="handleSave(record,1)" v-if="isEdit">取消</a-button>
+          <!-- <span v-if="!($hasPermissions('B_powerMD_user_edit') && record.superAdmin!=1) && !(record.loginFlag==1 && record.ownerOrgFlag==1 && $hasPermissions('B_powerMD_user_restPwd')) && !(record.loginFlag==0 && record.ownerOrgFlag==1 && $hasPermissions('B_powerMD_user_del'))">--</span> -->
+          </template>
+        </s-table>
+      </a-card>
+
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import { STable } from '@/components'
+import { getPowerUserList } from '@/api/power-user.js'
+export default {
+  components: { STable },
+  data () {
+    return {
+      spinning: false,
+      isEdit: false, // 货位号是否为编辑
+      // 表头
+      columns: [
+        { title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
+        { title: '货位号', dataIndex: 'name', width: '11%', align: 'center', scopedSlots: { customRender: 'name' } },
+        { title: '创建时间', dataIndex: 'createDate', width: '13%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '最后修改时间', dataIndex: '', width: '18%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '操作', width: '9%', align: 'center', scopedSlots: { customRender: 'status' } }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        this.spinning = true
+        return getPowerUserList(Object.assign(parameter)).then(res => {
+          let data
+          if (res.status == 200) {
+            data = res.data
+            const no = (data.pageNo - 1) * data.pageSize
+            for (let i = 0; i < data.list.length; i++) {
+              const _item = data.list[i]
+              _item.no = no + i + 1
+              _item.loginFlag = _item.loginFlag + '' === '1'
+            }
+          }
+          this.spinning = false
+          return data
+        })
+      }
+    }
+  },
+  mounted () {
+    this.$refs.table.refresh()
+  },
+  methods: {
+    handleBack () {
+      this.$router.go(-1)
+    },
+    handleExport () {
+      console.log('=========导入货位')
+    },
+    handleEdit (row) {
+      this.isEdit = true
+    },
+    handleSave (row, type) {
+      if (type == 0) {
+        console.log('====保存')
+      } else {
+        console.log('=====取消')
+      }
+      this.$nextTick(() => {
+        this.isEdit = false
+        this.$refs.table.refresh()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .goodsAllocationSet-page{
+    position: relative;
+    height: 100%;
+    padding-bottom: 51px;
+    box-sizing: border-box;
+    .goodsAllocationSet-baseInfo{
+      margin-bottom: 10px;
+    }
+  }
+</style>

+ 231 - 0
src/views/numsGoodsShelves/goodsShelvesAdministration/list.vue

@@ -0,0 +1,231 @@
+<template>
+  <a-card size="small" :bordered="false">
+    <a-spin :spinning="spinning" tip="Loading...">
+      <div ref="tableSearch" class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
+          <a-row :gutter="15">
+            <a-col :md="6" :sm="24">
+              <a-form-item label="货架名称">
+                <a-input id="userList-name" allowClear v-model.trim="queryParam.name" placeholder="请输入货架名称"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <a-form-item label="配件经销商">
+                <a-input id="userList-phone" allowClear v-model.trim="queryParam.phone" placeholder="请输入手机号码"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <a-form-item label="汽车修理厂">
+                <a-input id="userList-phone" allowClear v-model.trim="queryParam.phone" placeholder="请输入手机号码"/>
+              </a-form-item>
+            </a-col>
+            <template v-if="advanced">
+              <a-col :md="6" :sm="24">
+                <a-form-item label="状态">
+                  <v-select id="userList-loginFlag" code="ENABLE_FLAG" v-model="queryParam.loginFlag" allowClear placeholder="请选择状态"></v-select>
+                </a-form-item>
+              </a-col>
+            </template>
+            <a-col :md="4" :sm="24" style="margin-bottom: 10px;">
+              <a-button type="primary" @click="$refs.table.refresh(true)" id="userList-search">查询</a-button>
+              <a-button type="" @click="reset" id="userList-reset" style="margin-left: 10px;">重置</a-button>
+              <a @click="advanced=!advanced" style="margin-left: 8px">
+                {{ advanced ? '收起' : '展开' }}
+                <a-icon :type="advanced ? 'up' : 'down'"/>
+              </a>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <div class="table-operator">
+        <a-button v-if="$hasPermissions('B_powerMD_user_add')" type="primary" class="button-error" @click="openModal">新增数字货架</a-button>
+      </div>
+      <s-table
+        class="sTable fixPagination"
+        ref="table"
+        :style="{ height: tableHeight+84.5+'px', wordBreak: 'break-all' }"
+        size="small"
+        rowKey="id"
+        :columns="columns"
+        :data="loadData"
+        :scroll="{ y: tableHeight }"
+        :defaultLoadData="false"
+        bordered>
+        <span slot="status" slot-scope="text, record">
+          <a-switch checkedChildren="启用" unCheckedChildren="禁用" v-model="record.loginFlag" @change="changeFlagHandle(text, record)"/>
+        </span>
+        <span slot="action" slot-scope="text, record">
+          <a-button type="link" @click="handleEdit(record)">编辑</a-button>
+          <a-button type="link" @click="handleSet(record)">货位设置</a-button>
+          <!-- <span v-if="!($hasPermissions('B_powerMD_user_edit') && record.superAdmin!=1) && !(record.loginFlag==1 && record.ownerOrgFlag==1 && $hasPermissions('B_powerMD_user_restPwd')) && !(record.loginFlag==0 && record.ownerOrgFlag==1 && $hasPermissions('B_powerMD_user_del'))">--</span> -->
+        </span>
+      </s-table>
+    </a-spin>
+    <!-- 自建账号  新增/编辑 -->
+    <addGoodsShelve :visible="showModal" @refresh="$refs.table.refresh(true)" :nowData="itemData" @close="handleUserCancel"></addGoodsShelve>
+  </a-card>
+</template>
+
+<script>
+import { STable, VSelect } from '@/components'
+import addGoodsShelve from './addGoodsShelve.vue'
+import { resetPSD, updateEnableStatus, getPowerUserList, delectUserPower } from '@/api/power-user.js'
+export default {
+  name: 'UserList',
+  components: {
+    STable, VSelect, addGoodsShelve
+  },
+  data () {
+    return {
+      spinning: false,
+      advanced: false,
+      tableHeight: 0,
+      // 查询参数
+      queryParam: {
+        name: '',
+        phone: '',
+        loginFlag: undefined
+      },
+      showModal: false,
+      itemData: null, // 编辑行数据
+      // 表头
+      columns: [
+        { title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
+        { title: '货架名称', dataIndex: 'createDate', width: '11%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '配件经销商', dataIndex: 'org.name', width: '13%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '汽车修理厂', dataIndex: 'name', width: '18%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '货位数量', dataIndex: 'phone', width: '12%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '创建时间', dataIndex: 'loginName', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '状态', width: '9%', align: 'center', scopedSlots: { customRender: 'status' } },
+        { title: '操作', width: '10%', align: 'center', scopedSlots: { customRender: 'action' } }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        this.spinning = true
+        return getPowerUserList(Object.assign(parameter, this.queryParam)).then(res => {
+          let data
+          if (res.status == 200) {
+            data = res.data
+            const no = (data.pageNo - 1) * data.pageSize
+            for (let i = 0; i < data.list.length; i++) {
+              const _item = data.list[i]
+              _item.no = no + i + 1
+              _item.loginFlag = _item.loginFlag + '' === '1'
+            }
+          }
+          this.spinning = false
+          return data
+        })
+      },
+      optionAlertShow: false,
+      showSyncModal: false //  同步账号编辑弹框
+    }
+  },
+  methods: {
+    // 新增
+    openModal () {
+      this.itemData = null
+      this.showModal = true
+    },
+    // 关闭弹框
+    handleUserCancel () {
+      this.showModal = false
+      this.itemData = null
+    },
+    // 重置
+    reset () {
+      this.queryParam.name = ''
+      this.queryParam.phone = ''
+      this.queryParam.loginFlag = undefined
+      this.$refs.table.refresh(true)
+    },
+    // 重置密码
+    resetPassword (row) {
+      const _this = this
+      this.$confirm({
+        title: '提示',
+        content: '确认重置密码吗?',
+        centered: true,
+        onOk () {
+          _this.spinning = true
+          resetPSD({
+            id: row.id
+          }).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              _this.$refs.table.refresh()
+              _this.spinning = false
+            } else {
+              _this.spinning = false
+            }
+          })
+        }
+      })
+    },
+    handleEdit (row) {
+      this.itemData = row
+      if (row.ownerOrgFlag == 1) { //  自建
+        this.showModal = true
+      } else { //  同步过来的,非自建
+        this.showSyncModal = true
+      }
+    },
+    // 货位设置
+    handleSet (row) {
+      this.$router.push({ name: 'goodsAllocationSet', params: { id: row.id } })
+      // this.$router.push({ path: `/numsGoodsShelves/goodsShelvesAdministration/goodsAllocationSet/set/${row.id}` })
+    },
+    // 关闭弹框 同步账号
+    handleCancel () {
+      this.itemData = null
+      this.showSyncModal = false
+    },
+    // 修改状态
+    changeFlagHandle (text, record) {
+      const _data = {
+        id: record.id,
+        flag: record.loginFlag ? '1' : '0'
+      }
+      this.spinning = true
+      updateEnableStatus(_data).then(res => {
+        if (res.status == 200) {
+          this.$message.success(res.message)
+          this.$refs.table.refresh()
+          this.spinning = false
+        } else {
+          this.$refs.table.refresh()
+          this.spinning = false
+        }
+      })
+    },
+    pageInit () {
+      const _this = this
+      this.$nextTick(() => { // 页面渲染完成后的回调
+        _this.setTableH()
+      })
+    },
+    setTableH () {
+      const tableSearchH = this.$refs.tableSearch.offsetHeight
+      this.tableHeight = window.innerHeight - tableSearchH - 215
+    }
+  },
+  watch: {
+    '$store.state.app.winHeight' (newValue, oldValue) { //  窗口变更时,需同时更改表格高度
+      this.setTableH()
+    }
+  },
+  mounted () {
+    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
+      this.pageInit()
+      this.reset()
+    }
+  },
+  activated () {
+    // 如果是新页签打开,则重置当前页面
+    if (this.$store.state.app.isNewTab) {
+      this.pageInit()
+      this.reset()
+    }
+  }
+}
+</script>