123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221 |
- <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-input id="store-orgCode" v-model.trim="queryParam.orgCode" placeholder="请选择组织机构" @pressEnter="$refs.table.refresh(true)" allowClear /> -->
- <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="STORE_TYPE"
- allowClear
- placeholder="请选择门店类型"
- v-model="queryParam.selfFlag"
- code="STORE_BUSINESS_STATUS"></v-select>
- </a-form-item>
- </a-col>
- <a-col :span="6">
- <a-form-item class="search-item" label="启用状态">
- <v-select
- id="store-status"
- ref="ENABLE_FLAG"
- allowClear
- placeholder="请选择启用状态"
- v-model="queryParam.isEnable"
- code="DEVICE_STATUS"></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="action" slot-scope="text, record">
- <a-icon type="edit" title="编辑" id="store-edit" @click="edit(record)" :style="{ fontSize: '20px', color: '#1890FF', padding: '0 10px' }" />
- <a-icon type="link" title="设置" id="store-set" @click="setEquipment(record)" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" />
- </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 { getProvince, getCityByPro } from '@/api/lookup'
- 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: 'selfFlag', width: '100', align: 'center' },
- { title: '负责人名称', dataIndex: 'managerName', width: '100', align: 'center' },
- { title: '负责人手机', dataIndex: 'managerMobile', width: '100', align: 'center' },
- { title: '启用状态', dataIndex: '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>
|