|
@@ -0,0 +1,181 @@
|
|
|
+<template>
|
|
|
+ <a-card class="StoreManagement" :bordered="false">
|
|
|
+ <!-- 搜索条件 -->
|
|
|
+ <div class="table-page-search-wrapper">
|
|
|
+ <a-form-model ref="queryForm" :model="queryParam" layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
|
|
|
+ <a-row :gutter="48">
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-model-item class="search-item" label="供应商名称">
|
|
|
+ <a-input id="store-name" v-model.trim="queryParam.name" placeholder="请输入供应商名称" allowClear />
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-model-item class="search-item" label="组织机构">
|
|
|
+ <a-tree-select
|
|
|
+ showSearch
|
|
|
+ id="store-orgCode"
|
|
|
+ v-model="queryParam.orgCode"
|
|
|
+ allowClear
|
|
|
+ :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
|
|
+ :replace-fields="{children:'children', title:'name', key:'id', value: 'code' }"
|
|
|
+ :tree-data="treeData"
|
|
|
+ placeholder="请选择组织机构"
|
|
|
+ treeNodeFilterProp="title">
|
|
|
+ </a-tree-select>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6" style="padding-bottom: 10px;">
|
|
|
+ <a-button type="primary" id="store-search" class="search-btn" @click="$refs.table.refresh(true)">查询</a-button>
|
|
|
+ <a-button id="store-reset" @click="reset">重置</a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form-model>
|
|
|
+ </div>
|
|
|
+ <!-- 表格列表 -->
|
|
|
+ <s-table
|
|
|
+ ref="table"
|
|
|
+ size="default"
|
|
|
+ :rowKey="(record) => record.id"
|
|
|
+ :columns="columns"
|
|
|
+ :data="loadData"
|
|
|
+ bordered>
|
|
|
+ <!-- 组织机构 -->
|
|
|
+ <template slot="orgCode" slot-scope="text, record">
|
|
|
+ <span v-for="(item, index) in record.codeNameArr" :key="index">
|
|
|
+ {{ item }}
|
|
|
+ <strong v-if="index != record.codeNameArr.length-1">></strong>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <!-- 负责人名称 -->
|
|
|
+ <template slot="managerName" slot-scope="text, record">
|
|
|
+ <div v-if="record.managerName">{{ record.managerName }}</div>
|
|
|
+ <div v-else>--</div>
|
|
|
+ </template>
|
|
|
+ <!-- 操作 -->
|
|
|
+ <template slot="action" slot-scope="text, record">
|
|
|
+ <a-icon
|
|
|
+ type="edit"
|
|
|
+ title="编辑"
|
|
|
+ id="store-edit"
|
|
|
+ @click="handleEdit(record)"
|
|
|
+ class="actionBtn icon-blues"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </s-table>
|
|
|
+
|
|
|
+ <!-- 编辑 门店所属组织 -->
|
|
|
+ <supplier-modal :openModal="openModal" :supplierId="supplierId" :supplierName="supplierName" @success="storeSubmit" @close="openModal=false" />
|
|
|
+ </a-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { STable, VSelect } from '@/components'
|
|
|
+import SupplierModal from './SupplierModal.vue'
|
|
|
+// import { findStoreList } from '@/api/store.js'
|
|
|
+// import { findOrgTree } from '@/api/atorg.js'
|
|
|
+export default {
|
|
|
+ name: 'StoreManagement',
|
|
|
+ components: { STable, VSelect, SupplierModal },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ queryParam: {
|
|
|
+ name: '', // 门店名称
|
|
|
+ managerMobile: '', // 负责人手机
|
|
|
+ orgCode: null, // 组织机构
|
|
|
+ enableFlag: '' // 启用状态
|
|
|
+ },
|
|
|
+ columns: [
|
|
|
+ { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
|
|
|
+ { title: '组织机构', scopedSlots: { customRender: 'orgCode' }, width: 150, align: 'center' },
|
|
|
+ { title: '供应商名称', dataIndex: 'name', width: 120, align: 'center' },
|
|
|
+ { title: '联系人', scopedSlots: { customRender: 'managerName' }, width: 100, align: 'center' },
|
|
|
+ { title: '手机号码', dataIndex: 'managerMobile', width: 100, align: 'center' },
|
|
|
+ { title: '座机号码', dataIndex: 'phone', customRender: (text, record, index) => { return text || '--' }, width: 80, align: 'center' },
|
|
|
+ { title: '操作', scopedSlots: { customRender: 'action' }, width: 120, align: 'center' }
|
|
|
+ ],
|
|
|
+ // 加载数据方法 必须为 Promise 对象
|
|
|
+ loadData: parameter => {
|
|
|
+ // return findStoreList(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
|
|
|
+ // // 重组组织机构
|
|
|
+ // let codeNameArr = []
|
|
|
+ // if (_item.orgPCodeName) { // 父级组织机构名称
|
|
|
+ // const orgPCodeNameArr = _item.orgPCodeName.split(',')
|
|
|
+ // codeNameArr = orgPCodeNameArr.splice(0, orgPCodeNameArr.length - 1)
|
|
|
+ // }
|
|
|
+ // if (_item.orgCodeName) { // 当前组织机构名称
|
|
|
+ // codeNameArr.push(_item.orgCodeName)
|
|
|
+ // }
|
|
|
+ // _item.codeNameArr = codeNameArr
|
|
|
+ // }
|
|
|
+ // return res.data
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ return Promise.resolve().then(data => {
|
|
|
+ return {
|
|
|
+ list: [
|
|
|
+ { no: '1', id: '1', codeNameArr: ['陕西省公司', '西安分公司'], name: '箭冠汽配南京分公司', managerName: '张三', managerMobile: '18792701236' }
|
|
|
+ ],
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ count: 1
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ openModal: false, // 编辑 门店所属组织 弹框展示状态
|
|
|
+ supplierId: '', // 供应商id
|
|
|
+ supplierName: '', // 供应商名称
|
|
|
+ treeData: [] // 组织机构
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取组织机构 数据
|
|
|
+ getOrgList () {
|
|
|
+ findOrgTree().then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ this.treeData = res.data
|
|
|
+ } else {
|
|
|
+ this.treeData = []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 编辑供应商
|
|
|
+ handleEdit (item) {
|
|
|
+ this.supplierId = item.id
|
|
|
+ this.supplierName = item.name
|
|
|
+ this.openModal = true
|
|
|
+ },
|
|
|
+ // 编辑 提交成功
|
|
|
+ storeSubmit () {
|
|
|
+ this.$refs.table.refresh()
|
|
|
+ this.openModal = false
|
|
|
+ },
|
|
|
+ // 重置
|
|
|
+ reset () {
|
|
|
+ this.$refs.queryForm.resetFields()
|
|
|
+ this.$refs.table.refresh(true)
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ beforeRouteEnter (to, from, next) {
|
|
|
+ next(vm => {
|
|
|
+ vm.$refs.queryForm.resetFields()
|
|
|
+ // vm.getOrgList()
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.StoreManagement {
|
|
|
+ .table-page-search-wrapper {
|
|
|
+ .search-btn {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|