Forráskód Böngészése

费用类型管理

chenrui 4 éve
szülő
commit
244a80bbda

+ 25 - 0
src/config/router.config.js

@@ -1247,6 +1247,31 @@ export const asyncRouterMap = [
                 }
               }
             ]
+          },
+          {
+            path: '/basicData/expenseType',
+            redirect: '/basicData/expenseType/list',
+            name: 'expenseType',
+            component: RouteView,
+            meta: {
+              title: '费用类型管理',
+              icon: 'sliders'
+              // permission: 'M_goodsManage_list'
+            },
+            hideChildrenInMenu: true,
+            children: [
+              {
+                path: '/basicData/expenseType/list',
+                name: 'expenseTypeList',
+                component: () => import(/* webpackChunkName: "shop" */ '@/views/basicData/expenseType/list.vue'),
+                meta: {
+                  title: '费用类型列表',
+                  icon: 'sliders',
+                  hidden: true
+                  // permission: 'M_goodsManage_list'
+                }
+              }
+            ]
           }
         ]
       },

+ 146 - 0
src/views/basicData/expenseType/editModal.vue

@@ -0,0 +1,146 @@
+<template>
+  <a-modal
+    centered
+    class="expenseTypeEdit-modal"
+    :footer="null"
+    :maskClosable="false"
+    :title="modalTit"
+    v-model="isShow"
+    @cancle="isShow=false"
+    :width="800">
+    <!-- 表单 -->
+    <div>
+      <a-form-model
+        id="expenseTypeEdit-form"
+        ref="ruleForm"
+        :model="form"
+        :rules="rules"
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+      >
+        <a-form-model-item label="所属类别" v-if="parentType">
+          {{ parentType }}
+        </a-form-model-item>
+        <a-form-model-item label="费用类型名称" prop="productTypeName">
+          <a-input v-model.trim="form.productTypeName" id="expenseTypeEdit-name" :maxLength="30" allowClear placeholder="请输入费用类型名称(最多30个字符)" />
+        </a-form-model-item>
+      </a-form-model>
+      <div class="btn-cont">
+        <a-button type="primary" id="product-category-edit-modal-save" @click="handleSave">保存</a-button>
+        <a-button id="product-category-edit-modal-back" @click="isShow = false" style="margin-left: 15px;">返回列表</a-button>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import { STable } from '@/components'
+import { dealerProductTypeSave } from '@/api/dealerProductType'
+export default {
+  name: 'expenseTypeEditModal',
+  components: { STable },
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    itemId: {
+      type: [Number, String],
+      default: ''
+    },
+    nowData: {
+      type: Object,
+      default: null
+    }
+  },
+  computed: {
+    modalTit () {
+      return (this.itemId ? '编辑' : '新增') + '费用类型'
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      formItemLayout: {
+        labelCol: { span: 6 },
+        wrapperCol: { span: 16 }
+      },
+      form: {
+        productTypeName: '', // 费用类型名称
+      },
+      rules: {
+        productTypeName: [
+          { required: true, message: '请输入费用类型名称', trigger: 'blur' }
+        ],
+      },
+      parentType: '',  //  父级分类
+    }
+  },
+  methods: {
+    //  保存
+    handleSave(){
+      const _this = this
+      _this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const formData = JSON.parse(JSON.stringify(_this.form))
+          formData.id = _this.itemId ? _this.itemId : undefined
+          formData.psn = _this.nowData && _this.nowData.psn ? _this.nowData.psn : undefined
+          dealerProductTypeSave(formData).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              _this.$emit('ok')
+              _this.isShow = false
+            }
+          })
+        } else {
+          return false
+        }
+      })
+    },
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+      }else{
+        //  获取父级分类 名称
+        if(this.nowData && this.nowData.namePaths){
+          let namePathsArr = []
+          namePathsArr = this.nowData.namePaths.split(',')
+          this.parentType = ''
+          namePathsArr.map((item, index) => {
+            this.parentType += item + ' > '
+          })
+          this.parentType = this.parentType ? this.parentType.substr(0, this.parentType.length - 3) : ''
+        }else{
+          this.parentType = ''
+        }
+      }
+    },
+    itemId (newValue, oldValue) {
+      if (this.isShow && newValue) {
+        this.form.productTypeName = this.nowData && this.nowData.productTypeName ? this.nowData.productTypeName : ''
+      }else{
+        this.form.productTypeName = ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .expenseTypeEdit-modal{
+    .ant-modal-body {
+    	padding: 40px 40px 24px;
+    }
+    .btn-cont {
+    	text-align: center;
+    	margin: 35px 0 10px;
+    }
+  }
+</style>

+ 173 - 0
src/views/basicData/expenseType/list.vue

@@ -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>