tms-erp-web/src/views/base/measurement-unit.vue

<template>
  <basic-container class="measurement-unit-page">
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      v-model:page="page"
      v-model="form"
      ref="crud"
      :permission="permissionList"
      :before-open="beforeOpen"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template #menu-left>
        <el-button
          v-if="hasPermission('measurement_unit_add')"
          type="primary"
          @click="$refs.crud.rowAdd()"
        >
          新增
        </el-button>
        <el-button
          v-if="hasPermission('measurement_unit_delete')"
          type="danger"
          plain
          :disabled="!selectionList.length"
          @click="handleDelete"
        >
          批量删除
        </el-button>
      </template>
      <template #dimension="{ row }">
        {{ row.dimension || '-' }}
      </template>
      <template #status="{ row }">
        <el-tag :type="row.status === 1 ? 'primary' : 'info'" class="status-text">
          {{ row.status === 1 ? '启用' : '停用' }}
        </el-tag>
      </template>
      <template #menu="{ row, index }">
        <el-link
          v-if="hasPermission('measurement_unit_edit')"
          type="primary"
          @click="$refs.crud.rowEdit(row, index)"
        >
          编辑
        </el-link>
        <el-link
          v-if="hasPermission('measurement_unit_status')"
          type="primary"
          @click="handleStatus(row)"
        >
          {{ row.status === 1 ? '停用' : '启用' }}
        </el-link>
        <el-link
          v-if="hasPermission('measurement_unit_delete')"
          type="danger"
          @click="handleDelete(row.id)"
        >
          删除
        </el-link>
      </template>
    </avue-crud>
    <empty-pagination
      :page="page"
      @size-change="sizeChange"
      @current-change="currentChange"
      @load="onLoad(page, query)"
    />
  </basic-container>
</template>

<script>
import { mapGetters } from 'vuex';
import { changeStatus, getDetail, getList, remove, submit } from '@/api/base/measurement-unit';
import { createOption } from '@/option/base/measurement-unit';

export default {
  data() {
    return {
      form: {},
      query: {},
      loading: true,
      data: [],
      page: {
        pageSize: 10,
        pageSizes: [10, 20, 50, 100],
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: createOption(),
    };
  },
  computed: {
    ...mapGetters(['permission', 'userInfo']),
    permissionList() {
      return {
        addBtn: this.hasPermission('measurement_unit_add'),
      };
    },
    ids() {
      return this.selectionList.map(item => item.id).join(',');
    },
    isAdmin() {
      return String(this.userInfo?.authority || '').includes('admin');
    },
  },
  methods: {
    hasPermission(code) {
      return this.isAdmin || this.permission?.[code] === true;
    },
    normalizeRow(row) {
      row.unitName = String(row.unitName || '').trim();
      row.dimension = String(row.dimension || '').trim();
      row.remark = String(row.remark || '').trim();
      if (!row.status) row.status = 1;
      return row;
    },
    rowSave(row, done, loading) {
      submit(this.normalizeRow(row)).then(
        () => {
          this.onLoad(this.page, this.query);
          this.$message.success('操作成功');
          done();
        },
        () => loading()
      );
    },
    rowUpdate(row, index, done, loading) {
      submit(this.normalizeRow(row)).then(
        () => {
          this.onLoad(this.page, this.query);
          this.$message.success('操作成功');
          done();
        },
        () => loading()
      );
    },
    handleDelete(ids = '') {
      const targetIds = ids || this.ids;
      if (!targetIds) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      this.$confirm('确定删除所选数据，删除后不可恢复?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => remove(targetIds))
        .then(() => {
          this.onLoad(this.page, this.query);
          this.$message.success('操作成功');
          this.selectionList = [];
        });
    },
    handleStatus(row) {
      const nextStatus = row.status === 1 ? 2 : 1;
      const actionName = nextStatus === 1 ? '启用' : '停用';
      this.$confirm(`是否确认${actionName}该计量单位？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => changeStatus(row.id, nextStatus))
        .then(() => {
          this.onLoad(this.page, this.query);
          this.$message.success('操作成功');
        });
    },
    beforeOpen(done, type) {
      if (['edit', 'view'].includes(type)) {
        getDetail(this.form.id).then(res => {
          this.form = res.data.data || {};
          done();
        });
        return;
      }
      this.form.status = 1;
      done();
    },
    searchReset() {
      this.query = {};
      this.page.currentPage = 1;
      this.onLoad(this.page, this.query);
    },
    searchChange(params, done) {
      this.query = { ...params };
      this.page.currentPage = 1;
      this.onLoad(this.page, this.query);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad(this.page, this.query);
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.page.currentPage = 1;
      this.onLoad(this.page, this.query);
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page = this.page, params = this.query) {
      this.loading = true;
      return getList(page.currentPage, page.pageSize, params)
        .then(res => {
          const pageData = res.data.data || {};
          this.data = pageData.records || [];
          this.page.total = pageData.total || 0;
          this.selectionList = [];
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.measurement-unit-page {
  :deep(.avue-crud__menu) {
    margin-bottom: 8px;
  }

  :deep(.avue-crud__search .el-form-item__label) {
    min-width: 160px;
    white-space: nowrap;
  }

  :deep(.avue-crud__menu-column) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  :deep(.avue-crud__menu .el-link) {
    margin-right: 8px;
  }
}
</style>