123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222 |
- <template>
- <a-modal v-model="isShow" @cancel="cancel" title="选择关联门店" width="60%" :footer="null">
- <a-row :gutter="24">
- <a-form class="form-box" :form="form" @submit="handleSubmit">
- <a-col :span="10">
- <a-tree
- @check="onCheck"
- @expand="onExpand"
- @select="onSelect"
- :expandedKeys="expandedKeys"
- :autoExpandParent="autoExpandParent"
- v-model="checkedKeys"
- :treeData="treeData" />
- </a-col>
- <a-col :span="14">
- <a-table :columns="columns" :data-source="loadData" :pagination="false" bordered>
- <template slot="title">
- 选择门店
- </template>
- <span slot="action" slot-scope="text, record">
- <a-button type="danger" v-if="record.usedFlag == 1" @click="delect(record)" size="small" id="newStoreModal-delect">解绑</a-button>
- <a-button type="primary" v-if="record.usedFlag == 0" @click="handleSubmit(record)" size="small" id="newStoreModal-handleSubmit">绑定</a-button>
- </span>
- </a-table>
- </a-col>
- </a-form>
- </a-row>
- </a-modal>
- </template>
- <script>
- import {
- findOrgTree
- } from '@/api/atorg.js'
- import {
- STable
- } from '@/components'
- import {
- getOrgUsedStoreList,
- saveNewUserStore,
- deleteUsedStore
- } from '@/api/supervision-user.js'
- export default {
- name: 'NewStoreModal',
- components: {
- STable
- },
- props: {
- visible: {
- type: Boolean,
- default: false
- },
- ddId: {
- type: String,
- default: ''
- }
- },
- data () {
- return {
- isShow: this.visible,
- loadData: [], // 列表数据
- expandedKeys: [], // 树节点
- autoExpandParent: true, // 自动展开父节点
- checkedKeys: [], // 选中的key值
- checkedData: [], // 选中的数据
- treeData: [], // 组织机构
- orgId: '', // 组织机构id
- storeId: '', // 门店id
- columns: [{
- title: '序号',
- dataIndex: 'no',
- minWidth: '100',
- align: 'center'
- },
- {
- title: '门店名称',
- dataIndex: 'storeName',
- minWidth: '100',
- align: 'center'
- },
- {
- title: '操作',
- minWidth: '100',
- align: 'center',
- scopedSlots: {
- customRender: 'action'
- }
- }
- ]
- }
- },
- methods: {
- // 递归函数
- recursionFun (data) {
- if (data) {
- data.map(item => {
- if (item.children && item.children.length == 0) {
- item.key = item.id ? 'org' + item.id : ''
- item.value = item.id ? item.id : ''
- item.title = item.name ? item.name : ''
- } else {
- item.key = item.id ? 'org' + item.id : ''
- item.value = item.id ? item.id : ''
- item.title = item.name ? item.name : ''
- this.recursionFun(item.children)
- }
- })
- }
- return data
- },
- cancel (e) {
- this.$emit('close')
- },
- onExpand (expandedKeys) {
- this.expandedKeys = expandedKeys
- this.autoExpandParent = false
- },
- onCheck (checkedKeys, info) {
- this.checkedData = [...checkedKeys, ...info.halfCheckedKeys]
- this.checkedKeys = checkedKeys
- },
- onSelect (selectedKeys, info) {
- this.selectedKeys = selectedKeys[0]
- if (this.selectedKeys) {
- this.orgId = this.selectedKeys.substring(3, this.selectedKeys.length)
- }
- this.getListData()
- },
- // 获取列表数据
- getListData () {
- getOrgUsedStoreList({
- orgId: this.orgId
- }).then(res => {
- if (res.status == 200) {
- res.data.map((item, index) => {
- item.no = index + 1
- })
- this.loadData = res.data
- } else {
- this.loadData = []
- }
- })
- },
- // 绑定
- handleSubmit (record) {
- const _this = this
- this.$confirm({
- title: '提示',
- content: '确认给该督导绑定该门店?',
- okText: '确定',
- cancelText: '取消',
- onOk () {
- saveNewUserStore({
- userId: _this.ddId,
- storeId: record.storeId
- }).then(res => {
- if (res.status == 200) {
- _this.getListData()
- _this.$message.success(res.message)
- } else {
- _this.$message.error(res.message)
- }
- })
- }
- })
- },
- // 解绑
- delect (row) {
- const _this = this
- this.$confirm({
- title: '提示',
- content: '解绑后数据无法恢复,确认解绑?',
- okText: '确定',
- cancelText: '取消',
- onOk () {
- deleteUsedStore({
- id: row.id
- }).then(res => {
- if (res.status == 200) {
- _this.$message.success(res.message)
- _this.getListData()
- } else {
- _this.$message.error(res.message)
- }
- })
- }
- })
- }
- },
- beforeCreate () {
- this.form = this.$form.createForm(this, {
- name: 'NewStoreModal'
- })
- },
- watch: {
- checkedKeys (val) {
- console.log('onCheck', val)
- },
- visible (newValue, oldValue) {
- this.isShow = newValue
- },
- isShow (newValue, oldValue) {
- if (newValue) {
- // 获取组织机构树的数据
- findOrgTree().then(res => {
- if (res.status == 200) {
- this.treeData = this.recursionFun(res.data)
- this.getListData()
- } else {
- this.treeData = []
- }
- })
- } else {
- this.$emit('close')
- }
- }
- }
- }
- </script>
|