categorySet.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  1. <template>
  2. <div class="categorySet-wrap">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <a-card size="small" :bordered="false" class="categorySet-cont">
  5. <div class="table-operator" ref="categorySetAddBtn">
  6. <a-button type="primary" class="button-error" @click="addCategory" :disabled="disabled">+新增管辖品类</a-button>
  7. </div>
  8. <a-table
  9. bordered
  10. :data-source="dataSource"
  11. :columns="columns"
  12. ref="table"
  13. style="word-break: break-all;">
  14. <!-- :style="{ height: tableHeight+84.5+'px' }"
  15. :scroll="{ y: tableHeight }" -->
  16. <!-- 产品分类 -->
  17. <template slot="classify" slot-scope="text,record,index">
  18. <div style="max-height:230px;overflow-y:scroll;">
  19. <a-row v-if="record.productTypeList && record.productTypeList.length>0">
  20. <a-col :span="20">
  21. <a-tag style="margin-bottom:10px;" closable @close.prevent="delLabel(record.bizUserScopeSn,con,'typeList')" v-for="(con,i) in record.productTypeList" :key="i">
  22. {{ con.dataName }}
  23. </a-tag>
  24. </a-col>
  25. <a-col :span="4" style="text-align:right;">
  26. <a-tag style="background: #fff; borderStyle: dashed;" @click="addClassifyTag(index, record)" color="blue">
  27. <a-icon type="plus" /> 选择
  28. </a-tag>
  29. </a-col>
  30. </a-row>
  31. <a-row v-else>
  32. <a-col :span="24">
  33. <a-tag style="background: #fff; borderStyle: dashed;" @click="addClassifyTag(index, record)" color="blue">
  34. <a-icon type="plus" /> 选择
  35. </a-tag>
  36. </a-col>
  37. </a-row>
  38. </div>
  39. </template>
  40. <!-- 产品品牌 -->
  41. <template slot="brand" slot-scope="text,record,index">
  42. <div style="max-height:230px;overflow-y:scroll;">
  43. <a-row v-if="record.productBrandList && record.productBrandList.length>0">
  44. <a-col :span="20">
  45. <a-tag style="margin-bottom:10px;" closable @close.prevent="delLabel(record.bizUserScopeSn,item,'brandList')" v-for="(item,j) in record.productBrandList" :key="j">
  46. {{ item.dataName }}
  47. </a-tag>
  48. </a-col>
  49. <a-col :span="4" style="text-align:right;">
  50. <a-tag style="background: #fff; borderStyle: dashed;" @click="addBrandTag(index, record)" color="blue">
  51. <a-icon type="plus" /> 选择
  52. </a-tag>
  53. </a-col>
  54. </a-row>
  55. <a-row v-else>
  56. <a-col :span="24">
  57. <a-tag style="background: #fff; borderStyle: dashed;" @click="addBrandTag(index, record)" color="blue">
  58. <a-icon type="plus" /> 选择
  59. </a-tag>
  60. </a-col>
  61. </a-row>
  62. </div>
  63. </template>
  64. <span slot="action" slot-scope="text,record">
  65. <a-button
  66. size="small"
  67. type="link"
  68. class="button-error"
  69. @click="handleDel(record)"
  70. >
  71. 删除
  72. </a-button>
  73. </span>
  74. </a-table>
  75. </a-card>
  76. </a-spin>
  77. <!-- 选择产品品牌 -->
  78. <chooseBrandModal :openModal="openBrandModal" :chooseData="chooseBrand" @close="openBrandModal=false" @ok="handleBrandOk" />
  79. <!-- 选择产品分类 -->
  80. <chooseTypeModal :openModal="openTypeModal" :chooseData="chooseType" @close="openTypeModal=false" @ok="handleTypeOk" />
  81. </div>
  82. </template>
  83. <script>
  84. import { commonMixin } from '@/utils/mixin'
  85. import ChooseBrandModal from '@/views/common/chooseBrandModal.vue'
  86. import ChooseTypeModal from '@/views/common/chooseTypeModal.vue'
  87. import { getNewScopeSn, bizuserScopeQueryPage, saveProductBrandList, saveProductTypeList, bizuserScopeDelete, deleteProductBrand, deleteProductType } from '@/api/bizuser'
  88. export default {
  89. name: 'CategorySet',
  90. mixins: [commonMixin],
  91. components: { ChooseBrandModal, ChooseTypeModal },
  92. props: {
  93. bizUserSn: {
  94. type: String,
  95. default: ''
  96. }
  97. },
  98. data () {
  99. return {
  100. spinning: false,
  101. tableHeight: 0,
  102. disabled: false, // 查询、重置按钮是否可操作
  103. columns: [
  104. { title: '分类', dataIndex: 'no', width: '42%', align: 'center', scopedSlots: { customRender: 'classify' } },
  105. { title: '品牌', dataIndex: 'name', width: '42%', align: 'center', scopedSlots: { customRender: 'brand' } },
  106. { title: '操作', scopedSlots: { customRender: 'action' }, width: '16%', align: 'center' }
  107. ],
  108. dataSource: [],
  109. openModal: false, // 新增编辑产品品牌 弹框
  110. itemSn: '', // 当前sn
  111. nowData: null, // 当前记录数据
  112. openBrandModal: false,
  113. openTypeModal: false,
  114. chooseBrand: [],
  115. chooseType: [],
  116. chooseObj: null// 选择品牌 内容
  117. }
  118. },
  119. methods: {
  120. // 返回
  121. handleBack () {
  122. this.$router.push({ name: 'powerUserList' })
  123. },
  124. // 新增管辖品类
  125. addCategory () {
  126. const _this = this
  127. _this.spinning = true
  128. _this.disabled = true
  129. getNewScopeSn({}).then(res => {
  130. if (res.status == 200) {
  131. const newData = {
  132. bizUserScopeSn: res.data,
  133. productTypeList: [],
  134. productBrandList: []
  135. }
  136. _this.dataSource.push(newData)
  137. }
  138. _this.spinning = false
  139. _this.disabled = false
  140. })
  141. },
  142. // 删除分类、品牌标签
  143. delLabel (bigRow, row, type) {
  144. const _this = this
  145. this.$confirm({
  146. title: '提示',
  147. content: '删除后不可恢复,确定要删除吗?',
  148. centered: true,
  149. onOk () {
  150. const bigPos = _this.dataSource.findIndex(con => { return bigRow == con.bizUserScopeSn })
  151. if (type == 'typeList') {
  152. const typePos = _this.dataSource[bigPos].productTypeList.findIndex(item => { return item.id == row.id })
  153. deleteProductType({ id: _this.dataSource[bigPos].productTypeList[typePos].id }).then(res => {
  154. if (res.status == 200) {
  155. _this.dataSource[bigPos].productTypeList.splice(typePos, 1)
  156. }
  157. })
  158. } else {
  159. const brandPos = _this.dataSource[bigPos].productBrandList.findIndex(obj => { return obj.id == row.id })
  160. deleteProductBrand({ id: _this.dataSource[bigPos].productBrandList[brandPos].id }).then(res => {
  161. if (res.status == 200) {
  162. _this.dataSource[bigPos].productBrandList.splice(brandPos, 1)
  163. }
  164. })
  165. }
  166. }
  167. })
  168. },
  169. // 添加分类标签
  170. addClassifyTag (pos, row) {
  171. const newData = []
  172. row.productTypeList.forEach(item => {
  173. const obj = {}
  174. obj.productTypeSn = item.dataSn
  175. obj.goodsSn = item.dataSn
  176. obj.productTypeName = item.dataName
  177. newData.push(obj)
  178. })
  179. this.chooseType = newData
  180. this.chooseObj = row
  181. this.openTypeModal = true
  182. },
  183. handleClassifyModal (con) {
  184. const chooseList = con
  185. this.openTypeModal = false
  186. this.dataSource[this.ChooseClassifyPos].productTypeList = [...this.dataSource[this.ChooseClassifyPos].productTypeList, ...chooseList]
  187. },
  188. // 分类
  189. handleTypeOk (obj) {
  190. this.chooseType = obj
  191. this.saveChangeData('CATEGORY')
  192. },
  193. // 添加品牌标签
  194. addBrandTag (pos, row) {
  195. const newData = []
  196. row.productBrandList.forEach(item => {
  197. const obj = {}
  198. obj.goodsSn = item.dataSn
  199. newData.push(obj)
  200. })
  201. this.chooseBrand = newData
  202. this.chooseObj = row
  203. this.openBrandModal = true
  204. },
  205. // 品牌
  206. handleBrandOk (obj) {
  207. this.chooseBrand = obj
  208. this.saveChangeData('BRAND')
  209. },
  210. saveChangeData (type) {
  211. const _this = this
  212. if (type == 'BRAND') { // 选择品牌
  213. if (_this.chooseBrand.length > 0) {
  214. const snList = []
  215. _this.chooseBrand.map(item => {
  216. const newObj = {}
  217. newObj.dataSn = item.brandSn
  218. snList.push(newObj)
  219. })
  220. this.save(snList, type)
  221. }
  222. } else if (type == 'CATEGORY') { // 选择分类
  223. if (_this.chooseType.length > 0) {
  224. const snList = []
  225. _this.chooseType.map(item => {
  226. const newObj = {}
  227. newObj.dataSn = item.productTypeSn
  228. snList.push(newObj)
  229. })
  230. this.save(snList, type)
  231. }
  232. }
  233. },
  234. save (list, type) {
  235. const ajaxdata = { userSn: this.$route.query.sn, bizUserScopeSn: this.chooseObj.bizUserScopeSn, bizUserSn: this.bizUserSn }
  236. if (type == 'BRAND') {
  237. ajaxdata.productBrandList = list
  238. saveProductBrandList(ajaxdata).then(res => {
  239. if (res.status == 200) {
  240. this.openBrandModal = false
  241. this.getTableData()
  242. }
  243. })
  244. } else if (type == 'CATEGORY') {
  245. ajaxdata.productTypeList = list
  246. saveProductTypeList(ajaxdata).then(res => {
  247. if (res.status == 200) {
  248. this.openTypeModal = false
  249. this.getTableData()
  250. }
  251. })
  252. }
  253. },
  254. // 整行删除 删除
  255. handleDel (row) {
  256. const _this = this
  257. this.$confirm({
  258. title: '提示',
  259. content: '删除后不可恢复,确定要进行删除吗?',
  260. centered: true,
  261. onOk () {
  262. bizuserScopeDelete({ id: row.bizUserScopeSn }).then(res => {
  263. if (res.status == 200) {
  264. const pos = _this.dataSource.findIndex(item => { return item.bizUserScopeSn == row.bizUserScopeSn })
  265. _this.dataSource.splice(pos, 1)
  266. }
  267. })
  268. }
  269. })
  270. },
  271. pageInit () {
  272. const _this = this
  273. this.$nextTick(() => { // 页面渲染完成后的回调
  274. _this.setTableH()
  275. })
  276. this.getTableData()
  277. },
  278. // 获取列表数据
  279. getTableData (params = {}) {
  280. this.spinning = true
  281. bizuserScopeQueryPage({
  282. pageNo: 1,
  283. pageSize: 20,
  284. userSn: this.$route.query.sn,
  285. hasDetail: 1,
  286. bizUserSn: this.bizUserSn,
  287. ...params
  288. }).then(res => {
  289. if (res.status == 200) {
  290. this.dataSource = res.data.list
  291. }
  292. this.spinning = false
  293. })
  294. },
  295. setTableH () {
  296. const addBtnHeight = this.$refs.categorySetAddBtn.offsetHeight
  297. this.tableHeight = window.innerHeight - addBtnHeight - 385
  298. }
  299. },
  300. watch: {
  301. '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度
  302. this.setTableH()
  303. }
  304. },
  305. beforeRouteEnter (to, from, next) {
  306. next(vm => {})
  307. }
  308. }
  309. </script>
  310. <style lang="less">
  311. .categorySet-wrap{
  312. .table-operator{
  313. text-align:right;
  314. }
  315. }
  316. </style>