<template> <a-card class="StoreManagement" :bordered="false"> <!-- 搜索条件 --> <div class="table-page-search-wrapper"> <a-form layout="inline"> <a-row :gutter="48"> <a-col :span="6"> <a-form-item class="search-item" label="门店名称"> <a-input id="store-name" v-model.trim="queryParam.name" placeholder="请输入门店名称" @pressEnter="$refs.table.refresh(true)" allowClear /> </a-form-item> </a-col> <a-col :span="6"> <a-form-item class="search-item" label="负责人手机"> <a-input id="store-managerMobile" v-model.trim="queryParam.managerMobile" placeholder="请输入负责人手机" @pressEnter="$refs.table.refresh(true)" allowClear /> </a-form-item> </a-col> <a-col :span="6"> <a-form-item class="search-item" label="组织机构"> <a-tree-select showSearch id="store-orgCode" v-model="queryParam.orgCode" allowClear :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="treeData" placeholder="请选择组织机构" treeNodeFilterProp="title"> </a-tree-select> </a-form-item> </a-col> <a-col :span="6"> <a-form-item class="search-item" label="门店类型"> <v-select id="store-type" ref="selfFlag" allowClear placeholder="请选择门店类型" v-model="queryParam.selfFlag" code="STORE_TYPE"></v-select> </a-form-item> </a-col> <a-col :span="6"> <a-form-item class="search-item" label="启用状态"> <v-select id="store-status" ref="isEnable" allowClear placeholder="请选择启用状态" v-model="queryParam.isEnable" code="ENABLE_FLAG"></v-select> </a-form-item> </a-col> <a-col :span="6"> <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> </div> <!-- 表格列表 --> <s-table ref="table" size="default" :rowKey="(record) => record.id" :columns="columns" :data="loadData" bordered> <!-- 启用状态 --> <template slot="isEnable" slot-scope="text, record"> <div v-if="record.isEnable == 0" style="color: #ff4d4f">{{ record.isEnableDictValue }}</div> <div v-if="record.isEnable == 1" style="color: #1890FF">{{ record.isEnableDictValue }}</div> </template> <!-- 操作 --> <template slot="action" slot-scope="text, record"> <a-icon type="edit" title="编辑" id="store-edit" @click="edit(record)" :style="{ fontSize: '20px', color: '#1890FF', padding: '0 10px' }" v-hasPermission="'B_basicSettings_store_edit'" /> <a-icon type="link" title="设置" id="store-set" @click="setEquipment(record)" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" v-hasPermission="'M_store_device'" /> </template> </s-table> <!-- 编辑 门店所属组织 --> <store-modal :openModal="openModal" :storeId="storeId" @success="storeSubmit" @close="closeModal" /> <!-- 门店 关联设备 --> <store-associated-equipment-modal :openModal="openEquipmentModal" :storeId="storeId" :storeCode="storeCode" @close="closeDetailsModal" /> </a-card> </template> <script> import { STable, VSelect } from '@/components' import StoreModal from './StoreModal.vue' import StoreAssociatedEquipmentModal from './StoreAssociatedEquipmentModal.vue' import { findStoreList } from '@/api/store.js' import { findOrgTree } from '@/api/atorg.js' export default { name: 'StoreManagement', components: { STable, VSelect, StoreModal, StoreAssociatedEquipmentModal }, data () { return { queryParam: { name: '', // 门店名称 managerMobile: '', // 负责人手机 orgCode: null, // 组织机构 selfFlag: '', // 门店类型 isEnable: '' // 启用状态 }, columns: [ { title: '序号', dataIndex: 'no', width: '40', align: 'center' }, { title: '创建时间', dataIndex: 'createDate', width: '100', align: 'center' }, { title: '组织机构', dataIndex: 'orgCodeName', width: '100', align: 'center' }, { title: '门店名称', dataIndex: 'name', width: '100', align: 'center' }, { title: '门店类型', dataIndex: 'selfFlagDictValue', width: '100', align: 'center' }, { title: '负责人名称', dataIndex: 'managerName', width: '100', align: 'center' }, { title: '负责人手机', dataIndex: 'managerMobile', width: '100', align: 'center' }, { title: '启用状态', scopedSlots: { customRender: 'isEnable' }, width: '100', align: 'center' }, { title: '操作', scopedSlots: { customRender: 'action' }, width: '265', 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 } res.data.count = Number(res.data.count) return res.data } }) }, openModal: false, // 编辑 门店所属组织 弹框展示状态 openEquipmentModal: false, // 门店 关联设备 弹框展示状态 storeId: '', // 门店id storeCode: '', // 门店code treeData: [] // 组织机构 } }, mounted () { this.getOrgList() }, methods: { // 获取组织机构 数据 getOrgList () { findOrgTree().then(res => { if (res.status == 200) { this.treeData = this.recursionFun(res.data) } else { this.treeData = [] } }) }, // 递归函数 recursionFun (data) { if (data) { data.map(item => { if (item.children && item.children.length == 0) { item.key = item.id ? 'org' + item.id : '' item.value = item.code ? item.code : '' item.title = item.name ? item.name : '' } else { item.key = item.id ? 'org' + item.id : '' item.value = item.code ? item.code : '' item.title = item.name ? item.name : '' this.recursionFun(item.children) } }) } return data }, // 编辑 edit (item) { this.storeId = String(item.id) this.storeCode = String(item.code) this.openModal = true this.openEquipmentModal = false }, // 新增编辑 提交成功 storeSubmit () { this.$refs.table.refresh(true) this.openModal = false }, // 设置 setEquipment (item) { this.storeId = String(item.id) this.storeCode = String(item.code) this.openEquipmentModal = true this.openModal = false }, // 重置 reset () { this.queryParam = { name: '', // 门店名称 managerMobile: '', // 负责人手机 orgCode: null, // 组织机构 selfFlag: '', // 门店类型 isEnable: '' // 启用状态 } this.addrCityList = [] this.$refs.table.refresh(true) }, // 新增、编辑 弹框关闭 closeModal () { this.storeId = '' this.storeCode = '' this.openModal = false }, // 关联设备 弹框关闭 closeDetailsModal () { this.storeId = '' this.storeCode = '' this.openEquipmentModal = false } } } </script> <style lang="less"> .StoreManagement { .table-page-search-wrapper { .search-btn { margin-right: 10px; } } } </style>