提交

src/views/fileTransfer/apply.vue

@@ -1,8 +1,9 @@
 <template>
-  <div class="app-container">
+  <basic-container>
     <avue-crud
       ref="applyTableRef"
       :data="tableData"
+      :table-loading="loading"
       :option="tableOption"
       :page="page"
       @search-change="searchChange"
@@ -34,7 +35,6 @@
           plain
           size="small"
           type="primary"
-          icon="el-icon-edit"
           v-hasPermi="['transfer:apply:edit']"
           @click="handleUpdate(row)"
           v-if="row.auditStatus === '2'"
@@ -45,7 +45,6 @@
           plain
           size="small"
           type="danger"
-          icon="el-icon-delete"
           v-hasPermi="['transfer:apply:del']"
           @click="handleDelete(row)"
           v-if="row.auditStatus === '2'"
@@ -56,7 +55,6 @@
           plain
           size="small"
           type="success"
-          icon="el-icon-warning-outline"
           v-hasPermi="['transfer:apply:query']"
           @click="handleDetail(row)"
         >
@@ -77,7 +75,7 @@
       :disabled="loading"
       :width="600"
     />
-  </div>
+  </basic-container>
 </template>
 
 <script setup>
@@ -110,7 +108,7 @@ const dictData = reactive({
 const page = reactive({
   total: 0,
   currentPage: 1,
-  pageSize: 20
+  pageSize: 10
 })
 
 const searchForm = reactive({
@@ -159,13 +157,13 @@ const tableOption = computed(() => ({
   searchMenuSpan: 8,
   searchLabelWidth: 80,
   addBtn: false,
+  delBtn: false,
   editBtn: false,
   viewBtn: false,
   column: [
     {
       label: '项目名称',
       prop: 'proName',
-      width: 200,
       overHidden: true,
       showOverflowTooltip: true
     },
@@ -183,9 +181,9 @@ const tableOption = computed(() => ({
     {
       label: '项目类型',
       prop: 'proType',
-      width: 120,
       search: true,
       type: 'select',
+      hide: true,
       searchLabel: '项目类型',
       dicData: dictData.pro_type,
       searchPlaceholder: '请选择项目类型',
@@ -198,9 +196,9 @@ const tableOption = computed(() => ({
     {
       label: '电压等级',
       prop: 'voltageLevel',
-      width: 120,
       search: true,
       type: 'select',
+      hide: true,
       searchLabel: '电压等级',
       dicData: dictData.voltage_level,
       searchPlaceholder: '请选择电压等级',
@@ -213,23 +211,20 @@ const tableOption = computed(() => ({
     {
       label: '申请人',
       prop: 'createUserName',
-      width: 120,
       align: 'center'
     },
     {
       label: '申请时间',
       prop: 'createTime',
       type: 'datetime',
-      format: 'yyyy-MM-dd HH:mm:ss',
+      format: 'YYYY-MM-DD HH:mm:ss',
-      valueFormat: 'yyyy-MM-dd HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
-      width: 160,
       align: 'center'
     },
     {
       label: '审批状态',
       prop: 'auditStatus',
       slot: true,
-      width: 100,
       align: 'center',
       formatter: (row) => {
         return getStatusText(row.auditStatus)
@@ -401,9 +396,6 @@ defineExpose({
 </script>
 
 <style scoped>
-.app-container {
-  padding: 20px;
-}
 
 /* 重置搜索表单样式 */
 :deep(.avue-crud__search) {

src/views/fileTransfer/audit.vue

@@ -1,203 +1,360 @@
 <template>
   <basic-container>
     <avue-crud
-      :option="option"
+      ref="applyTableRef"
+      :data="tableData"
       :table-loading="loading"
-      :data="data"
+      :option="tableOption"
-      v-model:page="page"
+      :page="page"
-      :permission="permissionList"
-      :before-open="beforeOpen"
-      v-model="form"
-      ref="crud"
       @search-change="searchChange"
-      @row-del="rowDel"
-      @search-reset="searchReset"
-      @selection-change="selectionChange"
-      @current-change="currentChange"
       @size-change="sizeChange"
+      @current-change="currentChange"
       @refresh-change="refreshChange"
-      @on-load="onLoad"
     >
-      <!-- 自定义档案状态显示 -->
+
       <template #auditStatus="{ row }">
-        <el-tag :type="getStatusType(row.auditStatus)" effect="light">
+        <el-tag size="small" :type="getStatusType(row.auditStatus)">
           {{ getStatusText(row.auditStatus) }}
         </el-tag>
       </template>
+
+      <template #menu="{ row }">
+        <el-button
+          plain
+          size="small"
+          type="success"
+          v-hasPermi="['transfer:apply:query']"
+          @click="handleDetail(row)"
+        >
+          详情
+        </el-button>
+      </template>
     </avue-crud>
+
+    <ApplyForm
+      v-if="isflag"
+      :isAdd="isAdd"
+      :rowData="row"
+      @handleQuery="handleQuery"
+      :title="title"
+      @closeDialog="closeDialog"
+      @showColose="showColose"
+      :dataForm="row"
+      :disabled="loading"
+      :width="600"
+    />
   </basic-container>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
 import {
   getTransferAuditListApi,
-} from '@/api/filesTransfer/audit';
+} from '@/api/filesTransfer/audit.js'
-import { mapGetters } from 'vuex';
+import { getDictDataByTypeApi } from '@/api/select.js'
-import website from '@/config/website';
+import ApplyForm from './prop/applyForm.vue'
 
-export default {
+const router = useRouter()
-  data() {
-    return {
-      form: {},
-      query: {},
-      loading: true,
-      page: {
-        pageSize: 10,
-        currentPage: 1,
-        total: 0,
-      },
-      selectionList: [],
-      option: {
-        height: 'auto',
-        calcHeight: 32,
-        tip: false,
-        searchShow: true,
-        searchMenuSpan: 6,
-        border: true,
-        index: true,
-        viewBtn: false,
-        selection: false,
-        addBtn: true,
-        editBtn: false,
-        delBtn: false,
-        dialogClickModal: false,
-        column: [
 
-          {
+const applyTableRef = ref()
-            label: '项目名称',
+const title = ref('')
-            prop: 'proName',
+const isflag = ref(false)
-          },
+const isAdd = ref('')
+const row = ref({})
+const loading = ref(false)
+const tableData = ref([])
 
-          {
+// 字典数据
-            label: '单项工程名称',
+const dictData = reactive({
-            prop: 'singleProName',
+  pro_type: [],
-            search: true,
+  voltage_level: []
-          },
+})
-          {
-            label: '申请人',
-            prop: 'createUserName',
-          },
-          {
-            label: '申请时间',
-            prop: 'createTime',
-          },
-          {
-            label: '审批状态',
-            prop: 'auditStatus',
-            slot: true, // 启用插槽
-          },
 
-        ],
+const page = reactive({
-      },
+  total: 0,
-      data: [],
+  currentPage: 1,
-    };
+  pageSize: 10
-  },
+})
-  computed: {
+
-    ...mapGetters(['permission']),
+const searchForm = reactive({
-    permissionList() {
+  singleProName: '',
-      return {
+  proType: '',
-        addBtn: this.validData(this.permission.post_add, false),
+  voltageLevel: ''
-        viewBtn: this.validData(this.permission.post_view, false),
+})
-        delBtn: this.validData(this.permission.post_delete, false),
+
-        editBtn: this.validData(this.permission.post_edit, false),
+// 获取字典数据
-      };
+const getDictData = async () => {
-    },
+  try {
-    ids() {
+    const dictTypes = ['pro_type', 'voltage_level']
-      let ids = [];
+
-      this.selectionList.forEach(ele => {
+    // 并行请求所有字典数据
-        ids.push(ele.id);
+    const requests = dictTypes.map(dictType =>
-      });
+      getDictDataByTypeApi({ dictType }).then(res => {
-      return ids.join(',');
+        if (res.data && res.data.code === 200) {
-    },
+          dictData[dictType] = res.data.data.map(item => ({
-  },
+            label: item.dictLabel,
-  methods: {
+            value: item.dictValue
-    beforeOpen(done, type, row) {
+          }))
-      done(); // 必须调用 done()
+        } else {
-    },
+          dictData[dictType] = []
-    getStatusText(status) {
+        }
-      switch (status) {
+      }).catch(error => {
-        case '0':
+        console.error(`获取字典 ${dictType} 失败:`, error)
-          return '待审批'
+        dictData[dictType] = []
-        case '1':
-          return '审批通过'
-        case '2':
-          return '审批驳回'
-        default:
-          return '未知状态'
-      }
-    },
-    getStatusType(status) {
-      switch (status) {
-        case '0':
-          return 'warning'; // 黄色 - 待审批
-        case '1':
-          return 'success'; // 绿色 - 审批通过
-        case '2':
-          return 'danger';  // 红色 - 审批驳回
-        default:
-          return 'info';    // 灰色 - 未知状态
-      }
-    },
-    searchReset() {
-      this.query = {};
-      this.onLoad(this.page);
-    },
-    searchChange(params, done) {
-      this.query = params;
-      this.page.currentPage = 1;
-      this.onLoad(this.page, params);
-      done();
-    },
-    selectionChange(list) {
-      this.selectionList = list;
-    },
-    selectionClear() {
-      this.selectionList = [];
-      this.$refs.crud.toggleSelection();
-    },
-    currentChange(currentPage) {
-      this.page.currentPage = currentPage;
-    },
-    sizeChange(pageSize) {
-      this.page.pageSize = pageSize;
-    },
-    refreshChange() {
-      this.onLoad(this.page, this.query);
-    },
-    rowDel(row) {
-      this.$confirm('确定将选择数据删除?', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
       })
-        .then(() => {
+    )
-          return delTransferApplyApi(row.id);
+
-        })
+    await Promise.all(requests)
-        .then(() => {
+  } catch (error) {
-          this.onLoad(this.page);
+    console.error('获取字典数据失败:', error)
-          this.$message({
+  }
-            type: 'success',
+}
-            message: '操作成功!',
+
-          });
+// Avue 表格配置
-        });
+const tableOption = computed(() => ({
+  border: true,
+  index: true,
+  indexLabel: '序号',
+  menuWidth: 200,
+  align: 'center',
+  headerAlign: 'center',
+  labelWidth: 120,
+  searchMenuSpan: 8,
+  searchLabelWidth: 80,
+  addBtn: false,
+  delBtn: false,
+  editBtn: false,
+  viewBtn: false,
+  column: [
+    {
+      label: '项目名称',
+      prop: 'proName',
+      width: 200,
+      overHidden: true,
+      showOverflowTooltip: true
     },
-    onLoad(page, params = {}) {
+    {
-      this.loading = true;
+      label: '单项工程名称',
-      let data = {
+      prop: 'singleProName',
-        ...params,
+      width: 200,
-        pageNum:page.currentPage,
+      overHidden: true,
-        pageSize:page.pageSize
+      showOverflowTooltip: true,
-      };
+      search: true,
-      getTransferAuditListApi(data).then(res => {
+      searchLabel: '单项工程名称',
-        const data = res.data;
+      searchPlaceholder: '请输入单项工程名称',
-        this.page.total = data.total;
+      searchSpan: 8
-        this.data = data.rows;
-        this.loading = false;
-        this.selectionClear();
-      });
     },
-  },
+    {
-};
+      label: '项目类型',
+      prop: 'proType',
+      width: 120,
+      search: true,
+      type: 'select',
+      hide: true,
+      searchLabel: '项目类型',
+      dicData: dictData.pro_type,
+      searchPlaceholder: '请选择项目类型',
+      searchSpan: 8,
+      formatter: (row) => {
+        const item = dictData.pro_type.find(item => item.value === row.proType)
+        return item ? item.label : '-'
+      }
+    },
+    {
+      label: '电压等级',
+      prop: 'voltageLevel',
+      width: 120,
+      search: true,
+      type: 'select',
+      hide: true,
+      searchLabel: '电压等级',
+      dicData: dictData.voltage_level,
+      searchPlaceholder: '请选择电压等级',
+      searchSpan: 8,
+      formatter: (row) => {
+        const item = dictData.voltage_level.find(item => item.value === row.voltageLevel)
+        return item ? item.label : '-'
+      }
+    },
+    {
+      label: '申请人',
+      prop: 'createUserName',
+      align: 'center'
+    },
+    {
+      label: '申请时间',
+      prop: 'createTime',
+      type: 'datetime',
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      align: 'center'
+    },
+    {
+      label: '审批状态',
+      prop: 'auditStatus',
+      slot: true,
+      align: 'center',
+      formatter: (row) => {
+        return getStatusText(row.auditStatus)
+      }
+    }
+  ]
+}))
+
+// 获取表格数据
+const getTableList = async () => {
+  try {
+    const params = {
+      ...searchForm,
+      pageNum: page.currentPage,
+      pageSize: page.pageSize
+    }
+
+    // 清理空参数
+    Object.keys(params).forEach(key => {
+      if (params[key] === '' || params[key] === null || params[key] === undefined) {
+        delete params[key]
+      }
+    })
+
+    const res = await getTransferAuditListApi(params)
+    if (res.data && res.data.code === 200) {
+      tableData.value = res.data.rows || []
+      page.total = res.data.total || 0
+    } else {
+      tableData.value = []
+      page.total = 0
+    }
+  } catch (error) {
+    console.error('获取表格数据失败:', error)
+    tableData.value = []
+    page.total = 0
+  }
+}
+
+// 搜索
+const searchChange = (params, done) => {
+  Object.assign(searchForm, params)
+  page.currentPage = 1
+  getTableList()
+  done()
+}
+
+const sizeChange = (pageSize) => {
+  page.pageSize = pageSize
+  getTableList()
+}
+
+const currentChange = (currentPage) => {
+  page.currentPage = currentPage
+  getTableList()
+}
+
+const refreshChange = () => {
+  getTableList()
+}
+
+const closeDialog = () => {
+  isflag.value = false
+}
+
+const showColose = () => {
+  isflag.value = false
+}
+
+// 详情
+const handleDetail = (rowData) => {
+  router.push({
+    name: 'DetailData',
+    query: {
+      id: rowData.id ?? '0',
+      proId: rowData.proId ?? '0',
+      viewStatus: 'detail',
+      auditStatus: getStatusText2(rowData.auditStatus),
+    }
+  })
+}
+
+// 搜索操作
+const handleQuery = () => {
+  getTableList()
+}
+
+
+// 获取状态文本
+const getStatusText = (status) => {
+  switch (status) {
+    case '0': return '待审批'
+    case '1': return '审批通过'
+    case '2': return '审批驳回'
+    default: return '未知状态'
+  }
+}
+
+// 获取状态标签类型
+const getStatusType = (status) => {
+  switch (status) {
+    case '0': return 'warning'
+    case '1': return 'success'
+    case '2': return 'danger'
+    default: return 'info'
+  }
+}
+
+// 用于路由传递的状态值
+const getStatusText2 = (status) => {
+  switch (status) {
+    case '0': return 'approving'
+    case '1': return 'approved'
+    case '2': return 'rejected'
+    default: return 'approving'
+  }
+}
+
+// ✅ 关键修改：先加载字典，再加载表格数据
+onMounted(async () => {
+  await getDictData()
+  await getTableList()
+})
+
+// 暴露字典数据，供其他组件使用
+defineExpose({
+  dictData
+})
 </script>
 
-<style></style>
+<style scoped>
+
+/* 重置搜索表单样式 */
+:deep(.avue-crud__search) {
+  margin-bottom: 16px;
+}
+
+:deep(.avue-crud__search .el-form-item) {
+  margin-bottom: 16px;
+  margin-right: 16px;
+}
+
+:deep(.avue-crud__search .el-form-item__label) {
+  width: auto !important;
+  padding-right: 12px;
+}
+
+:deep(.avue-crud__search .el-input),
+:deep(.avue-crud__search .el-select) {
+  width: 200px !important;
+}
+
+:deep(.avue-crud__search .el-form--inline .el-form-item) {
+  display: inline-flex;
+  margin-right: 16px;
+  margin-bottom: 16px;
+  vertical-align: top;
+}
+
+/* 表格样式优化 */
+:deep(.avue-crud__table) {
+  margin-top: 16px;
+}
+</style>