:fire: 优化 采购页面添加类型 新增应付页面

buhuazhen

9 天以前 02dab18683eab22bf7a37c404a17d9174820f29c

:fire: 优化
采购页面添加类型
新增应付页面

 src/App.vue

@@ -4,9 +4,11 @@

<script setup>
import useSettingsStore from '@/store/modules/settings'
import dictStore from '@/store/modules/dict'
import { handleThemeStyle } from '@/utils/theme'

onMounted(() => {
  dictStore().initDict()
  nextTick(() => {
    // åˆå§‹åŒ–主题样式
    handleThemeStyle(useSettingsStore().theme)

 src/api/payable/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,18 @@
import request from '@/utils/request'

// æ·»åŠ 
export function addDuePayable(query) {
    return request({
        url: '/duePayable/addDuePayable',
        method: 'post',
        data: query
    })
}
// åˆ†é¡µæŸ¥è¯¢
export function findPayablePage(query) {
    return request({
        url: '/duePayable/list',
        method: 'get',
        params: query
    })
}

 src/api/system/dict/data.js

@@ -1,5 +1,13 @@
import request from '@/utils/request'

export function ListAllData(){
  return request({
    url: '/system/dict/data/dictDataList',
    method: 'get'
  })
}


// æŸ¥è¯¢å­—典数据列表
export function listData(query) {
  return request({

 src/store/modules/dict.js

@@ -1,15 +1,43 @@
import {ListAllData} from "@/api/system/dict/data"

const useDictStore = defineStore(
  'dict',
  {
    state: () => ({
      dict: new Array()
      dict: []
    }),
    actions: {
      async initDict() {
        const response = await ListAllData()
        this.dict = response.data
      },

      // æ ¹æ®å­—典类型获取字典
      getDictTypeList(_type) {
        if (_type == null || _type === "") {
          return null;
        }
        return this.dict.filter(item => item.type === _type);
      },

      getDictDataByTypeAndValue(_type,_value){
        if (_type == null || _value == null) {
          return {
            type:"",
            value:"",
            label:""
          };
        }
        return this.dict.find(item => item.type == _type && item.value == _value ) || null;

      },

      // èŽ·å–å­—å…¸
      getDict(_key) {
        if (_key == null && _key == "") {
          return null
        }
        // console.log(this.dict)
        try {
          for (let i = 0; i < this.dict.length; i++) {
            if (this.dict[i].key == _key) {
@@ -48,9 +76,7 @@
      cleanDict() {
        this.dict = new Array()
      },
      // åˆå§‹å­—å…¸
      initDict() {
      }

    }
  })


 src/views/payable/components/PayableDialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,279 @@
<template>
  <div>
    <el-dialog
        v-model="dialogPayableFormVisible"
        :title="title"
        width="600"
        :close-on-click-modal="false"
        @close="handleClose"
    >
      <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-width="auto"
          class="production-form"
          label-position="right"
          style="max-width: 400px; margin: 0 auto"
      >
        <el-form-item label="发票号" prop="ticketNo">
          <el-input
              v-model.number="form.ticketNo"
              placeholder="请输入发票号"
              :disabled="isViewMode"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="付款金额" prop="paymentAmount">
          <el-input
              v-model.number="form.paymentAmount"
              placeholder="请输入付款金额"
              :disabled="isViewMode"
          >
             <template v-slot:suffix>
              <i style="font-style: normal">元</i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="付款类型" prop="payableType">
          <el-select
              v-model="form.payableType"
              placeholder="请选择类型"
              :disabled="isViewMode"
          >
            <el-option
                v-for="item in payableTypeList"
                :key="item.value"
                :label="item.label"
                :value="Number(item.value)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上传附件" prop="attachUpload">
          <el-upload
              class="upload-demo"
              drag
              :fileList="form.fileList"
              :action="uploadFileUrl"
              :headers="headers"
              :http-request="UploadImage"
              :on-success="handleUploadSuccess"
              :on-remove="handleUploadRemove"
              :on-preview="handleUploadPreview"
              multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
        <el-form-item label="登记人" prop="registrantId">
          <el-input
              :value="match(form.registrantId)"
              v-model.number="form.registrantId"
              disabled
              placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="登记日期" prop="registrationDate">
          <el-date-picker
              disabled
              v-model="form.registrationDate"
              type="date"
              placeholder="YYYY-MM-DD"
              style="width: 100%"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <!-- é‡ç½®å’Œå–消 -->
          <el-button
              @click="handleClose"
              v-if="title.includes('新增') || title.includes('查看')"
          >取消
          </el-button>
          <el-button @click="handleReset" v-if="title.includes('编辑')"
          >重置
          </el-button>
          <el-button type="primary" v-if="!isViewMode" @click="handleSubmit"
          >确认</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="ProductionDialog">
import {ref, defineProps, watch, onMounted, nextTick, computed,reactive,defineEmits} from "vue";
import axios from "axios";
import {addDuePayable} from "@/api/payable/index.js"
import {ElMessage} from "element-plus";

import useUserStore from "@/store/modules/user.js";
import useDictStore from "@/store/modules/dict.js"
import {getToken} from "@/utils/auth.js";
const uploadFileUrl = computed(() => import.meta.env.VITE_APP_BASE_API + "/common/minioUploads");
const headers = computed(() => ({ Authorization: "Bearer " + getToken() }));



const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  statusType: { type: Number, default: 0 },
  dialogPayableFormVisible: {
    type: Boolean,
    required: true
  },
});

const handleUploadRemove = (it)=>{
  form.value.fileList = form.value.fileList.filter(f => f.uid !== it.uid);

}
const handleUploadPreview = (it)=>{
  const link = document.createElement("a");
  if(it.url){
    link.href = it.url
  }else {
    link.href = form.value.fileList.value.find(fl=>fl.uid === it.uid).url;
  }
  link.download = it.name;
  link.click();
}

const handleUploadSuccess = (res,file)=>{
  form.value.fileList.push(...res.data.map((it,index)=>{
    return {
      id:it.id,
      url:it.downloadUrl,
      name:it.originalFilename,
      status:"success",
      uid:file.uid
    }
  }))
}

// æ–‡ä»¶ä¸Šä¼ å¤„理
const UploadImage = (param) => {
  const formData = new FormData();
  formData.append("files", param.file);
  formData.append("type", props.statusType);
  axios.post(uploadFileUrl.value, formData, {
    headers: {
      "Content-Type": "multipart/form-data",
      ...headers.value,
    },
    onUploadProgress: (progressEvent) => {
      const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
      param.onProgress({ percent });
    },
  })
      .then((response) => {
        if (response.data.code === 200) {
          handleUploadSuccess(response.data, param.file);
          ElMessage.success("上传成功");
        } else {
          param.onError(new Error(response.data.msg));
          ElMessage.error(response.data.msg);
        }
      })
      .catch((error) => {
        param.onError(error);
      });
};
const emit = defineEmits(["update:dialogPayableFormVisible", "success"]);
const dialogPayableFormVisible = defineModel("dialogPayableFormVisible", {
  required: true,
  type: Boolean,
});
const form = defineModel("form", {
  required: true,
  type: Object,
});


const payableTypeList = ref([])
const isViewMode = computed(() => props.title.includes("查看"));

const userStore = useUserStore();
const userInfo = ref({});
const match = () => {
  return userInfo.value.nickName || "未知用户";
};




//###

onMounted(async () => {

  payableTypeList.value = useDictStore().getDictTypeList("payable_type").map((item) => ({
    value: item.value,
    label: item.label,
  }))

  let res = await userStore.getInfo();
  userInfo.value = res.user;

});
const rules = {

  payableType: [
    {required: true, message: "请选择类型", trigger: "change"}
  ],
  paymentAmount: [
    {required: true, message: "请输入金额", trigger: "blur"}
  ],
  ticketNo: [
    {required: true, message: "请输入发票号", trigger: "blur"}
  ]

};
// å…³é—­å¼¹çª—
const handleClose = () => {
  dialogPayableFormVisible.value = false;
  form.value.fileList.value = []
};

const handleReset = async ()=>{

}

const formRef = ref(null);
// æäº¤è¡¨å•
const handleSubmit = async () => {
  // æ–‡ä»¶å¤„理只获取id è¿›è¡Œæ‹¼æŽ¥
  if (!formRef.value) return;
  formRef.value.validate((valid) => {
    if (valid) {
      const obj = ref({});
      form.value.attachUpload = ""
      if (form.value.fileList.length > 0){
        form.value.attachUpload = form.value.fileList.map(it => it.id).join(",")
      }

      let result = addDuePayable({
        ...form.value
      })

      obj.value = {
        ...form.value,
        result
      }
      emit("success", obj.value);
    }
  })
};

</script>

<style lang="scss" scoped>


</style>

 src/views/payable/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,399 @@
<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item v-if="shouldShowSearch" label="搜索">
        <el-input
            v-model="queryParams.searchAll"
            :placeholder="searchPlaceholder"
            clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <!--        <el-button @click="resetQuery">重置</el-button>-->
      </el-form-item>
    </el-form>
    <el-card>


      <!-- æ“ä½œæŒ‰é’®åŒº -->
      <!--      <el-row :gutter="24" class="table-toolbar">-->
      <!--        <el-button-->
      <!--            :icon="Plus"-->
      <!--            type="primary"-->
      <!--            v-show="activeTab === 'payable'"-->
      <!--            @click="handleAdd"-->
      <!--        >新增应付款项</el-button>-->

      <!--      </el-row>-->
      <!-- è¡¨æ ¼ç»„件 -->
      <div class="table-container">
        <!-- åŠ è½½çŠ¶æ€ -->
        <el-skeleton v-if="loading" animated>
          <template #template>
            <el-skeleton-item variant="h1" style="width: 40%"/>
            <div style="padding: 14px;">
              <el-skeleton-item variant="text"/>
              <el-skeleton-item variant="text"/>
              <el-skeleton-item variant="text"/>
            </div>
          </template>
        </el-skeleton>

        <!-- æ•°æ®è¡¨æ ¼ -->
        <data-table
            v-else
            :showOverflowTooltip="false"
            :border="true"
            @edit="handleEdit"
            :columns="columns"
            :loading="loading"
            style="width: 100%; height: calc(100vh - 29em)"
            :show-selection="activeTab === 'payable'"
            :table-data="tableData"
        >
          <!-- ç©ºçŠ¶æ€æ’槽 -->
          <template #empty>
            <el-empty
                :description="`暂无${currentTabConfig?.label || ''}数据`"
                :image-size="120"
            >
              <template #description>
                <p>暂无{{ currentTabConfig?.label || '' }}数据</p>
              </template>
            </el-empty>
          </template>
        </data-table>
      </div>


      <pagination
          v-if="total > 0"
          :layout="'total, prev, pager, next, jumper'"
          :limit="state.pageSize"
          :current-page="state.current"
          :total="total"
          @pagination="handlePageChange"
      />

      <!-- æŸ¥çœ‹è¯¦æƒ…弹窗 -->
      <DilogTable
          v-model="dialogTableVisible"
          :title="dialogTableTitle"
          :table-data="dialogTableData"
          :columns="dialogTableColumns"
          @submit="handleSubmit"
          @success="payableHandleSuccess"
          width="70%"
          height="500px"
      />
    </el-card>
    <PayableDialog
        v-model:dialogPayableFormVisible="dialogPayableFormVisible"
        v-model:form="copyForm"
        :title="title"
        @submit="handleSubmit"
        @success="payableHandleSuccess"
        ref="productionDialogs">
    </PayableDialog>>
  </div>
</template>

<script setup>
import {computed, onMounted, reactive, ref, nextTick, toRefs} from "vue";
import {ElMessage} from "element-plus";
import {Delete, Plus} from "@element-plus/icons-vue";

// ç»„件导入
import DataTable from "@/components/Table/ETable.vue";
import Pagination from "@/components/PIMTable/Pagination.vue";
import DilogTable from "@/components/dialog/DilogTable.vue";

// API æœåŠ¡å¯¼å…¥
import {findPayablePage} from "@/api/payable/index"

const userStore = useUserStore();
const dictStore = useDictStore()
import useUserStore from "@/store/modules/user";
import useDictStore from "@/store/modules/dict"
import PayableDialog from "@/views/payable/components/PayableDialog.vue";

let userList = ref([]);
userStore.getUserList().then((res) => {
  userList.value = res;
});


// å“åº”式状态管理 - ä½¿ç”¨è§£æž„和默认值
const productionDialogs = ref(null); // æ·»åŠ ref声明
const initFormState = () => ({consumables: false});
const dialogPayableFormVisible = ref(false);
const addOrEdit = ref("edit");
const state = reactive({
  form: initFormState(),
  title: "",
  copyForm: {},
  loading: false,
  activeTab: "payable",
  selectedRows: [],
  tableData: [],
  // åˆ†é¡µçŠ¶æ€
  pageNum: 1,
  pageSize: 10,
  current: 1,
  total: 0,
  // æŸ¥è¯¢å‚æ•°
  queryParams: {
    searchAll: "",
  },
});
const userInfo = ref({});

onMounted(() => {
  let res = userStore.getInfo();
  userInfo.value = res.user;
  getList()
})
const handleEdit = (row) => {
  form.value = JSON.parse(JSON.stringify(row));
  addOrEdit.value = "edit";
  handleAddEdit()
}
const handleAddEdit = () => {
  addOrEdit.value == "add" ? (title.value = "新增") : addOrEdit.value == "viewRow" ? (title.value = "查看") : (title.value = "编辑");
  title.value = title.value + "应付管理";
  openDialog();
};

const openDialog = () => {
  if (addOrEdit.value === "edit" || addOrEdit.value === "viewRow") {
    // ç¡®ä¿å¤åˆ¶ä¸€ä»½æ•°æ®ï¼Œé¿å…ç›´æŽ¥å¼•ç”¨
    copyForm.value = JSON.parse(JSON.stringify(form.value));
    // console.log(copyForm.value)
    copyForm.value.fileList = copyForm.value.attachFileList.map((item) => {
      return {
        id: item.id,
        url: item.downloadUrl,
        uid: item.id,
        status: "success",
        name: item.originalFilename
      }
    })
    dialogPayableFormVisible.value = true;
    // è§¦å‘ref里面的方法
    return;
  }
};


const handleQuery = () => {
  state.loading = true;
  state.current = 1;
  getList()
}

const handlePageChange = (it) => {
  state.current = it.page
  getList();
}




const getList = async () => {
  loading.value = true;
  try {
    let resp = await findPayablePage(
        {
          current: state.current,
          pageSize: state.current
          , ...state.queryParams
        })
    tableData.value = resp.data.records
    total.value = resp.data.total || 0;
  } finally {
    loading.value = false;
  }
}

// ä½¿ç”¨è§£æž„简化访问
const {
  form,
  title,
  copyForm,
  loading,
  activeTab,
  selectedRows,
  current,
  tableData,
  pageNum,
  pageSize,
  total,
  queryParams,
} = toRefs(state);

// æ·»åŠ ç¼ºå¤±çš„响应式变量
const dialogTableVisible = ref(false);
const dialogTableTitle = ref('');
const dialogTableData = ref([]);
const dialogTableColumns = ref([]);


const payableHandleSuccess = (val) => {
  ElMessage.success("操作成功");
  dialogPayableFormVisible.value = false;
  getList()
}
const handleSubmit = (val) => {
  if (val.result.code !== 200) {
    ElMessage.error("操作失败：" + val.result.msg);
    return;
  }
  ElMessage.success(val.title + val.result.msg);
  dialogPayableFormVisible.value = false;
  getList();
};

// æ ‡ç­¾é¡µé…ç½® - ä¾¿äºŽåŽç»­æ‰©å±•
const tabsConfig = {
  payable: {
    searchPlaceholder: "",
    showSearch: true,
    // deleteApi: ,
    columns: [
      /* æš‚时不知道是否需要      {prop: "equipmentNo", label: "供应商名称", minWidth: 100},*/
      {prop: "ticketNo", label: "发票号", minWidth: 100},
      {prop: "paymentAmount", label: "付款金额(元)", minWidth: 100},
      // {prop: "specification", label: "附件", minWidth: 100},
      {
        prop: "payableType", label: "付款类型", minWidth: 100,
        formatter: (row) => {
          if (row.payableType == null) {
            return ""
          }
          const dictItem = dictStore.getDictDataByTypeAndValue("payable_type", row.payableType);
          return dictItem ? dictItem.label : "";
        }
      },
      {
        prop: "registrantId", label: "录入人", minWidth: 100,
        formatter: (row) => {
          // åŒ¹é…ç”¨æˆ·ä¿¡æ¯
          const user = userList.value.find((user) => user.userId === row.registrantId);
          return user ? user.nickName : "未知用户";
        },
      },
      {prop: "registrationDate", label: "录入日期", minWidth: 100},
    ],
  }
};


// å½“前标签页配置
const currentTabConfig = computed(() => tabsConfig[activeTab.value]);

// è®¡ç®—属性
const searchPlaceholder = computed(
    () => currentTabConfig.value?.searchPlaceholder || "请输入搜索信息"
);
const shouldShowSearch = computed(
    () => currentTabConfig.value?.showSearch || false
);
const columns = computed(() => currentTabConfig.value?.columns || []);
const selectedCount = computed(() => selectedRows.value.length);


// åŠ¨æ€èŽ·å–操作列宽度
const getOperationsWidth = () => {
  if (activeTab.value === 'equipmentRequisition') {
    return 250; // ä¸ºå½’还按钮预留更多空间
  }
  return 200; // é»˜è®¤å®½åº¦
};


</script>

<style scoped>
/* å“åº”式布局 */
@media screen and (min-width: 768px) {
  .search-form :deep(.el-form-item) {
    width: 50%;
  }
}

@media screen and (min-width: 1200px) {
  .search-form :deep(.el-form-item) {
    width: 16%;
  }
}

.table-toolbar {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.app-container {
  padding: 18px !important;
}

/* å“åº”式表格 */
@media screen and (max-width: 768px) {
  .table-toolbar {
    flex-direction: column;
  }

  .table-toolbar .el-button {
    width: 100%;
  }
}

/* è¡¨æ ¼å·¥å…·æ  */
.table-toolbar,
.table-toolbar > * {
  margin: 0 0 0 0 !important;
}

.table-toolbar {
  margin-bottom: 20px !important;
}

.el-form--inline .el-form-item {
  margin-right: 25px;
}

.main-container {
  background: red !important;
}

/* è®¾å¤‡çŠ¶æ€æ ·å¼ */
.status-using {
  color: #409eff;
  font-weight: 500;
}

.status-partial-return {
  color: #e6a23c;
  font-weight: 500;
}

.status-returned {
  color: #67c23a;
  font-weight: 500;
}

.status-unknown {
  color: #909399;
  font-weight: 500;
}

/* çŠ¶æ€æ ‡ç­¾æ ·å¼ */
:deep(.el-table .cell .status-tag) {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
</style>

 src/views/procureMent/components/ProductionDialog.vue

@@ -145,6 +145,20 @@
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
          <el-form-item label="类型" prop="purchaseType">
          <el-select
              v-model="form.purchaseType"
              placeholder="请选择类型"
              :disabled="isViewMode"
          >
            <el-option
                v-for="item in purchaseTypeList"
                :key="item.value"
                :label="item.label"
                :value="Number(item.value)"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
@@ -171,6 +185,7 @@
import { ElMessage } from "element-plus";
import useUserStore from "@/store/modules/user";
import { addOrEditPR, getSupplyList, getCoalInfoList } from "@/api/procureMent";
import useDictStore from "@/store/modules/dict"

const props = defineProps({
  title: {
@@ -193,8 +208,9 @@
});
const supplyList = ref([]);
const coalList = ref([]);
const purchaseTypeList = ref([])
const isViewMode = computed(() => props.title.includes("查看"));
// èŽ·å–供应商下拉和煤种下拉
// èŽ·å–供应商下拉和煤种下拉 ä»¥åŠç±»åž‹
const getDropdownData = async () => {
  try {
    const [supplyRes, coalRes] = await Promise.all([
@@ -211,6 +227,7 @@
      value: item.id,
      label: item.coal,
    }));

  } catch (error) {
    ElMessage.error("获取下拉数据失败，请稍后重试");
  }
@@ -333,12 +350,19 @@
};

onMounted(async () => {

  purchaseTypeList.value = useDictStore().getDictTypeList("purchase_type").map((item) => ({
    value: item.value,
    label: item.label,
  }))

  let res = await userStore.getInfo();
  userInfo.value = res.user;
  await getDropdownData();
  // ç»„件加载完成后触发一次计算
  calculatePrices();
});

const rules = {
  supplierName: [
    { required: true, message: "请输入供应商名称", trigger: "blur" },
@@ -358,6 +382,9 @@
    { required: true, message: "请输入税率", trigger: "blur" },
    { type: "number", message: "税率必须为数字", trigger: "blur" },
  ],
  purchaseType: [
    { required: true, message: "请选择类型", trigger: "change" }
  ]
};
// å…³é—­å¼¹çª—
const handleClose = () => {

 src/views/procureMent/index.vue

@@ -16,9 +16,12 @@
    </el-form>
    <el-card>
      <!-- æ“ä½œæŒ‰é’®åŒº -->
      <el-row :gutter="24" class="table-toolbar">
      <el-row :gutter="24" class="table-toolbar" justify="space-between">
        <el-button type="primary" :icon="Plus" @click="handleAdd"
          >新建
        </el-button>
        <el-button type="primary" :icon="Plus" @click="handleAddPayable">
          æ·»åŠ åº”付款
        </el-button>
        <!-- <el-button type="danger" :icon="Delete" @click="handleDelete"
          >删除
@@ -59,6 +62,14 @@
      @success="handleSuccess"
      ref="productionDialogs"
    />
    <PayableDialog
        v-model:dialogPayableFormVisible="dialogPayableFormVisible"
        v-model:form="formPayable"
        :title="title"
        @submit="handleSubmit"
        @success="payableHandleSuccess"
        ref="productionDialogs">
    </PayableDialog>>
  </div>
</template>

@@ -69,6 +80,8 @@
import DataTable from "@/components/Table/ETable.vue";
import Pagination from "@/components/Pagination";
import ProductionDialog from "./components/ProductionDialog.vue";
import PayableDialog from "../payable/components/PayableDialog.vue";

import {
  purchaseRegistration,
  getSupplyList,
@@ -77,14 +90,20 @@
} from "@/api/procureMent";
import { useDelete } from "@/hooks/useDelete";
const userStore = useUserStore();
const dictStore = useDictStore()
import useUserStore from "@/store/modules/user";
import useDictStore from "@/store/modules/dict"

let userList = ref([]);
userStore.getUserList().then((res) => {
  userList.value = res;
});

// å¼•å…¥å­—典数据

const { proxy } = getCurrentInstance();
const dialogFormVisible = ref(false);
const dialogPayableFormVisible = ref(false);
const form = ref({
  taxRate: 13,
  freight: 20,
@@ -97,6 +116,7 @@
const pageSize = ref(10);
const selectedRows = ref([]);
const copyForm = ref({});
const formPayable = ref({});
// æŸ¥è¯¢å‚æ•°
const queryParams = reactive({
  searchAll: "",
@@ -165,6 +185,14 @@
      return user ? user.nickName : "未知用户";
    },
  },
  { prop: "purchaseType", label: "类型", minWidth: 100 ,
    formatter: (row) => {
      if (row.purchaseType == null) {
        return ""
      }
      const dictItem = dictStore.getDictDataByTypeAndValue("purchase_type", row.purchaseType);
      return dictItem ? dictItem.label : "";    }
  },
  { prop: "registrationDate", label: "登记日期", minWidth: 100 },
]);

@@ -195,6 +223,28 @@
  addOrEdit.value = "add";
  handleAddEdit();
};
const handleAddPayable = () => {
  // åªæœ‰é€‰æ‹©ä¸€è¡Œçš„时候进行操作

  if (selectedRows.value.length !== 1) {
    ElMessage.error("请选中一行进行填写")
    return
  }

  formPayable.value = {
    purchaseRegistrationId: selectedRows.value[0].id,
    registrantId: userInfo.value.userId,
    ticketNo:"",
    paymentAmount:"",
    payableType:"",
    attachUpload:"",
    registrationDate: new Date().toISOString().split("T")[0],
    fileList:[]
  }
  dialogPayableFormVisible.value = true

};

// æ–°å¢žç¼–辑
const productionDialogs = ref(null); // æ·»åŠ ref声明

@@ -212,7 +262,6 @@
    // è§¦å‘ref里面的方法
    return;
  }
  console.log(userInfo.value)
  // æ–°å»ºæ—¶åˆå§‹åŒ–表单
  form.value = {
    supplierName: "",
@@ -227,6 +276,7 @@
    freight:20,
    registrantId: userInfo.value.userId,
    registrationDate: new Date().toISOString().split("T")[0],
    purchaseType: ""
  };
  // æ–°å»ºæ—¶ä¹Ÿéœ€è¦è®¾ç½® copyForm ç”¨äºŽé‡ç½®åŠŸèƒ½
  copyForm.value = JSON.parse(JSON.stringify(form.value));
@@ -278,6 +328,12 @@
  total.value = tableData.value.length;
  ElMessage.success("操作成功");
};

const payableHandleSuccess = (val) => {
  ElMessage.success("操作成功");
  dialogPayableFormVisible.value = false;
}

const getList = async () => {
  loading.value = true;
  try {