|
@@ -0,0 +1,173 @@
|
|
|
+<template>
|
|
|
+ <a-card :bordered="false" class="expenseTypeList-wrap">
|
|
|
+ <!-- 操作按钮 -->
|
|
|
+ <div class="table-operator">
|
|
|
+ <a-button id="expenseTypeList-add" type="primary" @click="handleAdd()" style="margin-top: 18px;">新增一级分类</a-button>
|
|
|
+ </div>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <s-table
|
|
|
+ class="sTable"
|
|
|
+ ref="table"
|
|
|
+ size="default"
|
|
|
+ :rowKey="(record) => record.id"
|
|
|
+ :columns="columns"
|
|
|
+ :data="loadData"
|
|
|
+ :showPagination="false"
|
|
|
+ :defaultExpandedRowKeys="defaultExpandedRowKeys"
|
|
|
+ bordered>
|
|
|
+ <!-- 操作 -->
|
|
|
+ <template slot="action" slot-scope="text, record">
|
|
|
+ <a-button
|
|
|
+ v-if="record.productTypeLevel<3"
|
|
|
+ type="link"
|
|
|
+ size="small"
|
|
|
+ icon="plus"
|
|
|
+ class="btn-add-s"
|
|
|
+ id="expenseType-addSubItem"
|
|
|
+ @click="handleAdd(record)">新增子级</a-button>
|
|
|
+ <a-button
|
|
|
+ v-if="record.pid != 0"
|
|
|
+ type="link"
|
|
|
+ size="small"
|
|
|
+ icon="edit"
|
|
|
+ class="btn-edit-s"
|
|
|
+ id="expenseType-edit"
|
|
|
+ @click="handleEdit(record)">编辑</a-button>
|
|
|
+ <a-button
|
|
|
+ v-if="record.pid != 0"
|
|
|
+ type="link"
|
|
|
+ size="small"
|
|
|
+ icon="delete"
|
|
|
+ class="btn-del-s"
|
|
|
+ id="expenseType-del"
|
|
|
+ @click="handleDel(record)">删除</a-button>
|
|
|
+ </template>
|
|
|
+ </s-table>
|
|
|
+ <!-- 新增/编辑费用类型 -->
|
|
|
+ <expense-type-edit-modal :openModal="openModal" :nowData="nowData" :itemId="itemId" @ok="handleOk" @close="closeModal" />
|
|
|
+ </a-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { dealerProductTypeQuery, dealerProductTypeDel } from '@/api/dealerProductType'
|
|
|
+import { STable } from '@/components'
|
|
|
+import expenseTypeEditModal from './editModal.vue'
|
|
|
+export default {
|
|
|
+ components: { STable, expenseTypeEditModal },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ formItemLayout: {
|
|
|
+ labelCol: { span: 6 },
|
|
|
+ wrapperCol: { span: 16 }
|
|
|
+ },
|
|
|
+ columns: [
|
|
|
+ { title: '费用类型名称', dataIndex: 'productTypeName', align: 'left' },
|
|
|
+ { title: '创建时间', dataIndex: 'createDate', align: 'center' },
|
|
|
+ { title: '操作', scopedSlots: { customRender: 'action' }, align: 'center' }
|
|
|
+ ],
|
|
|
+ // 加载数据方法 必须为 Promise 对象
|
|
|
+ loadData: parameter => {
|
|
|
+ this.disabled = true
|
|
|
+ return dealerProductTypeQuery({}).then(res => {
|
|
|
+ // 递归去除空children
|
|
|
+ this.recursionFun(res.data)
|
|
|
+ if(res.data.length > 0){
|
|
|
+ this.defaultExpandedRowKeys[0] = res.data[0].id
|
|
|
+ }else{
|
|
|
+ this.defaultExpandedRowKeys = []
|
|
|
+ }
|
|
|
+ return res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ defaultExpandedRowKeys: [], // 树形数据默认展开项
|
|
|
+ openModal: false, // 新增编辑 弹框
|
|
|
+ itemId: '', // 当前id
|
|
|
+ nowData: null // 当前记录数据
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 新增子级
|
|
|
+ handleAdd (row) {
|
|
|
+ this.itemId = null
|
|
|
+ if(row){ // 新增子级
|
|
|
+ let nowData = row
|
|
|
+ nowData.psn = nowData && nowData.productTypeSn ? nowData.productTypeSn : null
|
|
|
+ this.nowData = nowData
|
|
|
+ }else{ // 最高级
|
|
|
+ this.nowData = null
|
|
|
+ }
|
|
|
+ this.openModal = true
|
|
|
+ },
|
|
|
+ // 编辑
|
|
|
+ handleEdit (row) {
|
|
|
+ this.itemId = row && row.id ? row.id : null
|
|
|
+ let nowData = row
|
|
|
+ nowData.psn = nowData && nowData.productTypeSn ? nowData.productTypeSn : null
|
|
|
+ this.nowData = nowData
|
|
|
+ this.openModal = true
|
|
|
+ },
|
|
|
+ // 关闭弹框
|
|
|
+ closeModal(){
|
|
|
+ this.itemId = ''
|
|
|
+ this.openModal = false
|
|
|
+ },
|
|
|
+ // 新增/编辑 成功
|
|
|
+ handleOk(){
|
|
|
+ this.$refs.table.refresh(true)
|
|
|
+ },
|
|
|
+ // 删除
|
|
|
+ handleDel (item) {
|
|
|
+ const _this = this
|
|
|
+ _this.nowId = item.id
|
|
|
+ _this.$confirm({
|
|
|
+ title: '提示',
|
|
|
+ content: '删除后原数据不可恢复,是否删除?',
|
|
|
+ centered: true,
|
|
|
+ onOk () {
|
|
|
+ dealerProductTypeDel({ id: _this.nowId }).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ _this.$message.success(res.message)
|
|
|
+ _this.$refs.table.refresh()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 递归函数
|
|
|
+ recursionFun (data) {
|
|
|
+ if (data) {
|
|
|
+ data.map((item, index) => {
|
|
|
+ if (item.children && item.children.length == 0) {
|
|
|
+ delete item.children
|
|
|
+ } else {
|
|
|
+ this.recursionFun(item.children)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .expenseTypeList-wrap{
|
|
|
+ // 表格
|
|
|
+ .s-table{
|
|
|
+ .btn-edit-s{
|
|
|
+ color: #1891ff;
|
|
|
+ margin: 0 5px;
|
|
|
+ }
|
|
|
+ .btn-del-s{
|
|
|
+ color: #ff4d4f;
|
|
|
+ }
|
|
|
+ .btn-edit-s.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger), .btn-edit-s.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger){
|
|
|
+ color: #1891ff;
|
|
|
+ border-color: #1891ff;
|
|
|
+ }
|
|
|
+ .btn-del-s.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger), .btn-del-s.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger){
|
|
|
+ color: #ff4d4f;
|
|
|
+ border-color: #ff4d4f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|