123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221 |
- <template>
- <a-card size="small" :bordered="false" class="marketingDivisionSetNew-wrap">
- <a-spin :spinning="spinning" tip="Loading...">
- <!-- 操作按钮 -->
- <div ref="tableSearch" class="table-operator" style="border: 0;">
- <a-button id="marketingDivisionSetNew-add" type="primary" @click="addArea">新增区域</a-button>
- </div>
- <!-- 列表 -->
- <s-table
- class="sTable fixPagination"
- ref="table"
- :style="{ height: tableHeight+70+'px'}"
- size="small"
- :rowKey="(record) => record.id"
- :columns="columns"
- :showPagination="false"
- :data="loadData"
- :scroll="{ y: tableHeight }"
- :defaultLoadData="false"
- bordered>
- <template slot="titles" slot-scope="text, record">
- {{ record.type && record.type == 'root' ? record.subareaName : record.subareaAreaName }}
- </template>
- <!-- 操作 -->
- <template slot="action" slot-scope="text, record">
- <a-button
- size="small"
- type="link"
- class="button-info"
- v-if="record.type && record.type == 'root'"
- @click="addZone(record)"
- :id="'marketingDivisionSetNew-edit-btn'+record.id">新增分区</a-button>
- <a-button
- size="small"
- type="link"
- class="button-success"
- v-else
- @click="handleView(record)"
- :id="'marketingDivisionSetNew-edit-btn'+record.id">查看经销商</a-button>
- <a-button
- size="small"
- type="link"
- class="button-info"
- @click="handleEdit(record)"
- :id="'marketingDivisionSetNew-edit-btn'+record.id">编辑</a-button>
- <a-button
- size="small"
- type="link"
- class="button-error"
- @click="handleDel(record)"
- :id="'marketingDivisionSetNew-del-btn'+record.id">删除</a-button>
- </template>
- </s-table>
- </a-spin>
- <!-- 新增区域 -->
- <addAreaModal
- v-drag
- :openModal="openAreaModal"
- :itemId="itemId"
- @ok="$refs.table.refresh()"
- @close="openAreaModal=false"></addAreaModal>
- <!-- 新增分区 -->
- <addZoneModal
- v-drag
- :openModal="openZoneModal"
- :parentData="parentData"
- @ok="$refs.table.refresh()"
- @close="openZoneModal=false"></addZoneModal>
- <!-- 查看经销商 -->
- <viewDealers
- :showModal="openDealerModal"
- :parentData="parentData"
- @close="openDealerModal=false"></viewDealers>
- </a-card>
- </template>
- <script>
- import { commonMixin } from '@/utils/mixin'
- // 组件
- import { STable, VSelect } from '@/components'
- import addAreaModal from './addAreaModal.vue'
- import addZoneModal from './addZoneModal.vue'
- import viewDealers from './viewDealers.vue'
- // 接口
- import { subareaQueryAll, deleteSubareaBySn, deleteSubareaAreaBySn } from '@/api/subarea'
- export default {
- name: 'MarketingDivisionSetNew',
- mixins: [commonMixin],
- components: { STable, VSelect, addAreaModal, addZoneModal, viewDealers },
- data () {
- return {
- spinning: false,
- tableHeight: 0, // 表格高度
- openAreaModal: false, // 打开区域弹窗
- openZoneModal: false, // 打开分区弹窗
- openDealerModal: false, // 打开经销商弹窗
- columns: [
- { title: '区域分区', scopedSlots: { customRender: 'titles' }, width: '70%', align: 'left' },
- { title: '操作', scopedSlots: { customRender: 'action' }, width: '30%', align: 'center' }
- ],
- // 加载数据方法 必须为 Promise 对象
- loadData: parameter => {
- this.spinning = true
- return subareaQueryAll(parameter).then(res => {
- let data
- if (res.status == 200) {
- data = res.data
- // 计算列表序号
- const no = 0
- for (var i = 0; i < data.length; i++) {
- data[i].no = no + i + 1
- data[i].children = data[i].subareaAreaList || undefined
- data[i].type = 'root'
- }
- }
- this.spinning = false
- return data
- })
- },
- itemId: null, // 营销分区id
- parentData: null// 营销分区一行数据
- }
- },
- methods: {
- // 新增区域
- addArea () {
- this.itemId = null
- this.openAreaModal = true
- },
- // 新增分区
- addZone (row) {
- console.log(row)
- this.openZoneModal = true
- this.parentData = row
- },
- // 删除
- handleDel (row) {
- const _this = this
- this.$confirm({
- title: '提示',
- content: '确定要删除吗?删除后相关用户权限自动解绑。',
- centered: true,
- onOk () {
- _this.spinning = true
- const delFun = row.type && row.type == 'root' ? deleteSubareaBySn : deleteSubareaAreaBySn
- const params = { sn: row.type && row.type == 'root' ? row.subareaSn : row.subareaAreaSn }
- delFun(params).then(res => {
- if (res.status == 200) {
- _this.$message.success(res.message)
- _this.$refs.table.refresh()
- _this.spinning = false
- } else {
- _this.spinning = false
- }
- })
- }
- })
- },
- // 编辑
- handleEdit (row) {
- // 大区
- if (row.type && row.type == 'root') {
- this.itemId = row && row.subareaSn ? row.subareaSn : null
- this.openAreaModal = true
- } else {
- // 分区
- this.parentData = row
- this.openZoneModal = true
- }
- },
- // 查看经销商
- handleView (row) {
- this.parentData = row
- this.openDealerModal = true
- },
- // 初始化
- pageInit () {
- const _this = this
- this.$nextTick(() => { // 页面渲染完成后的回调
- _this.setTableH()
- })
- },
- // 计算表格高度
- setTableH () {
- const tableSearchH = this.$refs.tableSearch.offsetHeight
- this.tableHeight = window.innerHeight - tableSearchH - 230
- }
- },
- watch: {
- '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度
- this.setTableH()
- }
- },
- mounted () {
- if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
- this.pageInit()
- this.$refs.table.refresh()
- }
- },
- activated () {
- // 如果是新页签打开,则重置当前页面
- if (this.$store.state.app.isNewTab) {
- this.pageInit()
- this.$refs.table.refresh()
- }
- // 仅刷新列表,不重置页面
- if (this.$store.state.app.updateList) {
- this.pageInit()
- this.$refs.table.refresh()
- }
- },
- beforeRouteEnter (to, from, next) {
- next(vm => {})
- }
- }
- </script>
- <style lang="less">
- .marketingDivisionSetNew-wrap{
- height: 100%;
- }
- </style>
|