aaa

doum

2026-06-04 08e9a67dd679f311e79a27b04cd0c53a30b4bccf

 company_admin/src/views/business/category.vue

@@ -1,169 +1,153 @@
<template>
  <TableLayout :permissions="['business:category:query']">
    <!-- 搜索表单 -->
    <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" inline>
      <el-form-item label="类别名称" prop="name">
        <el-input v-model="searchForm.name" placeholder="请输入类别名称" @keypress.enter.native="search"></el-input>
        <el-input v-model="searchForm.name" placeholder="请输入类别名称" @keypress.enter.native="loadTree"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="searchForm.type" clearable placeholder="请选择">
          <el-option
            v-for="item in typeList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
          <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <section>
        <el-button type="primary" @click="search">搜索</el-button>
        <!-- <el-button type="primary" :loading="isWorking.export" v-permissions="['business:category:exportExcel']" @click="exportExcel">导出</el-button> -->
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="loadTree">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </section>
    </el-form>
    <!-- 表格和分页 -->
    <template v-slot:table-wrap>
      <ul class="toolbar" v-permissions="['business:category:create']">
        <li><el-button type="primary" @click="$refs.operaCategoryWindow.open('新建类别')" icon="el-icon-plus" v-permissions="['business:category:create']">新建</el-button></li>
        <li><el-button type="primary" @click="$refs.operaCategoryWindow.open('新建类别')" icon="el-icon-plus">新建一级类别</el-button></li>
      </ul>
      <el-table
        v-loading="isWorking.search"
        :data="tableData.list"
        v-loading="loading"
        :data="tableData"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        row-key="id"
        stripe
        border
        default-expand-all
        :header-cell-style="rowStyle"
        :cell-style="rowStyle"
      >
        <el-table-column prop="imgurl" label="图标" min-width="100px">
        <el-table-column prop="imgurl" label="图标" min-width="90px">
          <template slot-scope="{row}">
              <el-image
              v-if="row.imgurl"
              style="width: 70px; height: 70px"
              :src="row.prefixUrl + row.imgurl"
              :preview-src-list="[row.prefixUrl + row.imgurl]"
              fit="cover"></el-image>
            <el-image v-if="row.imgurl" style="width: 50px; height: 50px" :src="categoryImgUrl(row)" fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="类别名称" min-width="100px"></el-table-column>
        <el-table-column prop="categoryName" label="类型" min-width="100px">
        <el-table-column prop="name" label="类别名称" min-width="140px">
          <template slot-scope="{row}">
            <span v-if="row.type == 0">自定义</span>
            <span v-else>系统</span>
            <span v-if="row.parentId">└ {{ row.name }}</span>
            <span v-else>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sortnum" label="排序码(升序)" min-width="100px"></el-table-column>
        <el-table-column prop="createDate" label="创建时间" min-width="100px"></el-table-column>
        <el-table-column prop="status" label="状态" min-width="100px">
        <el-table-column label="级别" min-width="80px">
          <template slot-scope="{row}">{{ row.parentId ? '二级类别' : '一级类别' }}</template>
        </el-table-column>
        <el-table-column prop="sortnum" label="排序码" min-width="80px"></el-table-column>
        <el-table-column prop="createDate" label="创建时间" min-width="140px"></el-table-column>
        <el-table-column prop="status" label="状态" min-width="80px">
          <template slot-scope="{row}">
              <el-switch
                  v-model="row.status"
                  @change="changeStatus(row)"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="0"
                  :inactive-value="1">
              </el-switch>
            <el-switch v-model="row.status" @change="changeStatus(row)" :active-value="0" :inactive-value="1" />
          </template>
        </el-table-column>
        <el-table-column
          v-if="containPermissions(['business:category:update', 'business:category:delete'])"
          label="操作"
          min-width="120"
          fixed="right"
        >
        <el-table-column label="操作" min-width="220px" fixed="right">
          <template slot-scope="{row}">
            <el-button type="text" @click="edit(row.id)" icon="el-icon-edit" v-permissions="['business:category:update']">编辑</el-button>
            <el-button type="text" @click="deleteById(row)" icon="el-icon-delete" v-permissions="['business:category:delete']">删除</el-button>
            <template v-if="!row.parentId">
              <el-button type="text" @click="edit(row.id)" v-permissions="['business:category:update']">编辑</el-button>
              <el-button type="text" @click="$refs.operaSubCategoryWindow.open('新建子类别', row)" v-permissions="['business:category:create']">新增子类别</el-button>
              <el-button type="text" class="btn-delete" icon="el-icon-delete" @click="deleteParent(row)" v-permissions="['business:category:delete']">删除</el-button>
            </template>
            <template v-else>
              <el-button type="text" @click="$refs.operaSubCategoryWindow.open('编辑子类别', { id: row.parentId }, row)" v-permissions="['business:category:update']">编辑</el-button>
              <el-button type="text" class="btn-delete" icon="el-icon-delete" @click="deleteSub(row)" v-permissions="['business:category:delete']">删除</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :pagination="tableData.pagination"
      >
      </pagination>
    </template>
    <!-- 新建/修改 -->
    <OperaCategoryWindow ref="operaCategoryWindow" @success="handlePageChange"/>
    <OperaCategoryWindow ref="operaCategoryWindow" @success="loadTree"/>
    <OperaSubCategoryWindow ref="operaSubCategoryWindow" @success="loadTree"/>
  </TableLayout>
</template>
  

<script>
  import BaseTable from '@/components/base/BaseTable'
  import TableLayout from '@/layouts/TableLayout'
  import Pagination from '@/components/common/Pagination'
  import OperaCategoryWindow from '@/components/business/OperaCategoryWindow'
  import { queryById, updateDisableById } from '@/api/business/category.js'
  export default {
    name: 'Category',
    extends: BaseTable,
    components: { TableLayout, Pagination, OperaCategoryWindow },
    data () {
      return {
        // 搜索
        searchForm: {
          name: '',
          type: ''
        },
        typeList: [
          { name: '自定义', id: 0 },
          { name: '系统', id: 1 }
        ]
      }
import TableLayout from '@/layouts/TableLayout'
import OperaCategoryWindow from '@/components/business/OperaCategoryWindow'
import OperaSubCategoryWindow from '@/components/business/OperaSubCategoryWindow'
import { fetchTree, queryById, updateDisableById, deleteById, deleteSub as deleteSubApi } from '@/api/business/category.js'

export default {
  name: 'Category',
  components: { TableLayout, OperaCategoryWindow, OperaSubCategoryWindow },
  data () {
    return {
      loading: false,
      tableData: [],
      searchForm: { name: '', type: '' },
      typeList: [{ name: '自定义', id: 0 }, { name: '系统', id: 1 }]
    }
  },
  created () {
    this.loadTree()
  },
  methods: {
    rowStyle () { return 'text-align:center' },
    categoryImgUrl (row) {
      if (!row.imgurl) return ''
      if (row.imgurl.indexOf('http') === 0) return row.imgurl
      return (row.prefixUrl || '') + row.imgurl
    },
    created () {
      this.config({
        module: '类别',
        api: '/business/category',
        'field.id': 'id',
        'field.main': 'name'
      })
      this.search()
    },
    methods: {
      rowStyle() {
      return "text-align:center";
    },
      changeStatus(item) {
        updateDisableById({
          id: item.id,
          status: item.status
        }).then(res => {
          this.$tip.apiSuccess('更新成功')
        }).finally(() => {
          // this.search()
    loadTree () {
      this.loading = true
      fetchTree(this.searchForm).then(res => {
        this.tableData = (res || []).map(p => {
          const prefixUrl = p.prefixUrl || ''
          const children = (p.children || []).map(c => ({
            ...c,
            parentId: c.parentId != null ? c.parentId : p.id,
            prefixUrl: c.prefixUrl || prefixUrl
          }))
          return { ...p, children }
        })
      },
      edit(id) {
        queryById(id)
          .then(res => {
            let obj = {
              id,
              name: res.name,
              attrFirst: res.attrFirst,
              attrFirstList: res.attrFirstList,
              attrSecond: res.attrSecond,
              attrSecondList: res.attrSecondList,
              sortnum: res.sortnum,
              paramList: res.paramList,
              imgurl: res.imgurl,
              budgetList: res.budgetList.length > 0 ? res.budgetList : [{ maxamount: '', minamount: '' }],
              type: res.type,
              platCateId: res.platCateId,
              tableData: res.paramList.map(item => {
                return {
                  id: item.id,
                  name: item.name,
                  isselect: item.isselect,
                  isshow: item.isshow
                }
              }),
              fileList: res.imgurl ? [{ url: res.prefixUrl + res.imgurl }] : []
            }
            this.$refs.operaCategoryWindow.open('编辑类别', obj)
          })
      }
      }).finally(() => { this.loading = false })
    },
    resetSearch () {
      this.searchForm = { name: '', type: '' }
      this.loadTree()
    },
    changeStatus (item) {
      updateDisableById({ id: item.id, status: item.status }).then(() => {
        this.$message.success('更新成功')
      })
    },
    edit (id) {
      queryById(id).then(res => {
        const obj = {
          id, name: res.name, sortnum: res.sortnum, paramList: res.paramList,
          imgurl: res.imgurl, budgetList: res.budgetList.length > 0 ? res.budgetList : [{ maxamount: '', minamount: '' }],
          type: res.type, platCateId: res.platCateId,
          tableData: res.paramList.map(item => ({ id: item.id, name: item.name, isselect: item.isselect, isshow: item.isshow })),
          fileList: res.imgurl ? [{ url: res.prefixUrl + res.imgurl }] : []
        }
        this.$refs.operaCategoryWindow.open('编辑类别', obj)
      })
    },
    deleteParent (row) {
      this.$confirm(`确认删除【${row.name}】?`, '提示').then(() => {
        deleteById(row.id).then(() => {
          this.$message.success('删除成功')
          this.loadTree()
        })
      })
    },
    deleteSub (row) {
      this.$confirm(`确认删除子类别【${row.name}】?`, '提示').then(() => {
        deleteSubApi(row.id).then(() => {
          this.$message.success('删除成功')
          this.loadTree()
        })
      })
    }
  }
</script>
}
</script>