123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170 |
- <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 prop="name" class="search-item" label="供应商名称">
- <a-input id="supplier-name" v-model.trim="queryParam.name" placeholder="请输入供应商名称" allowClear />
- </a-form-model-item>
- </a-col>
- <a-col :span="6">
- <a-form-model-item prop="orgCode" class="search-item" label="组织机构">
- <a-tree-select
- showSearch
- id="supplier-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="supplier-search" class="search-btn" @click="$refs.table.refresh(true)">查询</a-button>
- <a-button id="supplier-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>
- <span v-if="record.codeNameArr.length==0">--</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="supplier-edit"
- @click="handleEdit(record)"
- class="actionBtn icon-blues"
- />
- </template>
- </s-table>
- <!-- 编辑 门店所属组织 -->
- <supplier-modal :openModal="openModal" :supplierSn="supplierSn" @success="storeSubmit" @close="openModal=false" />
- </a-card>
- </template>
- <script>
- import { STable, VSelect } from '@/components'
- import SupplierModal from './SupplierModal.vue'
- import { findOrgTree } from '@/api/atorg.js'
- import { supplierListQuery } from '@/api/supplierManagement.js'
- export default {
- name: 'StoreManagement',
- components: { STable, VSelect, SupplierModal },
- data () {
- return {
- queryParam: {
- name: '', // 供应商名称
- orgCode: null // 组织机构
- },
- columns: [
- { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
- { title: '组织机构', scopedSlots: { customRender: 'orgCode' }, width: 150, align: 'center' },
- { title: '供应商名称', dataIndex: 'name', width: 120, align: 'center' },
- { title: '联系人', dataIndex: 'manager', width: 100, align: 'center', customRender: (text, record, index) => { return text || '--' } },
- { title: '手机号码', dataIndex: 'managerMobile', width: 100, align: 'center' },
- { title: '座机号码', dataIndex: 'tel', customRender: (text, record, index) => { return text || '--' }, width: 80, align: 'center' },
- { title: '操作', scopedSlots: { customRender: 'action' }, width: 120, align: 'center' }
- ],
- // 加载数据方法 必须为 Promise 对象
- loadData: parameter => {
- return supplierListQuery(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.orgParentNamePaths) { // 父级组织机构名称
- const orgPCodeNameArr = _item.orgParentNamePaths.split(',')
- codeNameArr = orgPCodeNameArr.splice(0, orgPCodeNameArr.length - 1)
- }
- if (_item.orgCodeName) { // 当前组织机构名称
- codeNameArr.push(_item.orgCodeName)
- }
- _item.codeNameArr = codeNameArr
- }
- return res.data
- }
- })
- },
- openModal: false, // 编辑 门店所属组织 弹框展示状态
- supplierSn: '', // 供应商信息
- supplierName: '', // 供应商名称
- treeData: [] // 组织机构
- }
- },
- methods: {
- // 获取组织机构 数据
- getOrgList () {
- findOrgTree().then(res => {
- if (res.status == 200) {
- this.treeData = res.data
- console.log(this.treeData, 'this.treeData')
- } else {
- this.treeData = []
- }
- })
- },
- // 编辑供应商
- handleEdit (item) {
- this.supplierSn = item.supplierSn
- 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>
|