gaoluyang
100 分钟以前 8bffc8205125aa66253dd72dc509ba29f242a71b
src/views/procurementManagement/procurementLedger/index.vue
@@ -39,7 +39,6 @@
    <div class="table_list">
      <div style="display: flex;justify-content: flex-end;margin-bottom: 20px;">
        <el-button type="primary" @click="openForm('add')">新增台账</el-button>
        <el-button type="success" @click="openScanAddDialog">扫码新增</el-button>
        <el-button @click="handleOut">导出</el-button>
        <el-button type="danger" plain @click="handleDelete">删除</el-button>
      </div>
@@ -167,7 +166,7 @@
        <el-table-column
            fixed="right"
            label="操作"
            min-width="150"
            width="100"
            align="center"
        >
          <template #default="scope">
@@ -177,13 +176,6 @@
                size="small"
                @click="openForm('edit', scope.row)"
            >编辑</el-button
            >
            <el-button
                link
                type="success"
                size="small"
                @click="showQRCode(scope.row)"
            >生成二维码</el-button
            >
          </template>
@@ -198,11 +190,14 @@
          @pagination="paginationChange"
      />
    </div>
    <el-dialog
    <FormDialog
        v-model="dialogFormVisible"
        :title="operationType === 'add' ? '新增采购台账页面' : '编辑采购台账页面'"
        width="70%"
        :width="'70%'"
        :operation-type="operationType"
        @close="closeDia"
        @confirm="submitForm"
        @cancel="closeDia"
    >
      <el-form
          :model="form"
@@ -474,18 +469,15 @@
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确认</el-button>
          <el-button @click="closeDia">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
    </FormDialog>
    <FormDialog
        v-model="productFormVisible"
        :title="productOperationType === 'add' ? '新增产品' : '编辑产品'"
        width="40%"
        :width="'40%'"
        :operation-type="productOperationType"
        @close="closeProductDia"
        @confirm="submitProduct"
        @cancel="closeProductDia"
    >
      <el-form
          :model="productForm"
@@ -632,228 +624,7 @@
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitProduct">确认</el-button>
          <el-button @click="closeProductDia">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 二维码显示对话框 -->
    <el-dialog
        v-model="qrCodeDialogVisible"
        title="采购合同号二维码"
        width="400px"
        center
    >
      <div style="text-align: center;">
        <img :src="qrCodeUrl" alt="二维码" style="width:200px;height:200px;" />
        <div style="margin: 20px;">
          <el-button type="primary" @click="downloadQRCode">下载二维码图片</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 扫码新增对话框 -->
    <el-dialog
        v-model="scanAddDialogVisible"
        title="扫码新增采购台账"
        width="70%"
        @close="closeScanAddDialog"
    >
      <el-form
          :model="scanAddForm"
          label-width="140px"
          label-position="top"
          :rules="scanAddRules"
          ref="scanAddFormRef"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="扫码内容:">
              <el-input
                  v-model="scanAddForm.scanContent"
                  type="textarea"
                  :rows="3"
                  placeholder="请扫描二维码或手动输入采购合同信息"
                  @input="parseScanContent"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="采购合同号:" prop="purchaseContractNumber">
              <el-input
                  v-model="scanAddForm.purchaseContractNumber"
                  placeholder="请输入"
                  clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商名称:" prop="supplierName">
              <el-input
                  v-model="scanAddForm.supplierName"
                  placeholder="请输入"
                  clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目名称:" prop="projectName">
              <el-input
                  v-model="scanAddForm.projectName"
                  placeholder="请输入"
                  clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同金额(元):" prop="contractAmount">
              <el-input-number
                  v-model="scanAddForm.contractAmount"
                  :precision="2"
                  :step="0.1"
                  clearable
                  style="width: 100%"
                  placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="付款方式:">
              <el-input
                  v-model="scanAddForm.paymentMethod"
                  placeholder="请输入"
                  clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="录入人:">
              <el-input v-model="scanAddForm.recorderName" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注:">
              <el-input
                  v-model="scanAddForm.remark"
                  type="textarea"
                  :rows="2"
                  placeholder="请输入备注信息"
                  clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitScanAdd">确认新增</el-button>
          <el-button @click="closeScanAddDialog">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 扫码登记对话框 -->
    <el-dialog
        v-model="scanDialogVisible"
        title="扫码登记"
        width="60%"
        @close="closeScanDialog"
    >
      <el-form
          :model="scanForm"
          label-width="120px"
          label-position="left"
          :rules="scanRules"
          ref="scanFormRef"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="采购合同号:">
              <el-input v-model="scanForm.purchaseContractNumber" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商名称:">
              <el-input v-model="scanForm.supplierName" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目名称:">
              <el-input v-model="scanForm.projectName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="扫码时间:">
              <el-input v-model="scanForm.scanTime" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="扫码人:">
              <el-input v-model="scanForm.scannerName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="扫码状态:">
              <el-tag :type="scanForm.scanStatus === '已扫码' ? 'success' : 'warning'">
                {{ scanForm.scanStatus }}
              </el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="扫码备注:">
              <el-input
                  v-model="scanForm.scanRemark"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入扫码备注信息"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="扫码记录:">
              <el-table :data="scanRecords" border style="width: 100%">
                <el-table-column label="序号" type="index" width="60" align="center" />
                <el-table-column label="扫码时间" prop="scanTime" width="180" />
                <el-table-column label="扫码人" prop="scannerName" width="120" />
                <el-table-column label="扫码状态" prop="scanStatus" width="100">
                  <template #default="scope">
                    <el-tag :type="scope.row.scanStatus === '已扫码' ? 'success' : 'warning'">
                      {{ scope.row.scanStatus }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="备注" prop="scanRemark" />
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitScan">确认扫码</el-button>
          <el-button @click="closeScanDialog">取消</el-button>
        </div>
      </template>
    </el-dialog>
    </FormDialog>
  </div>
</template>
@@ -861,6 +632,7 @@
<script setup>
import {getToken} from "@/utils/auth";
import pagination from "@/components/PIMTable/Pagination.vue";
import FormDialog from '@/components/Dialog/FormDialog.vue';
import {getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs} from "vue";
import {Search} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
@@ -885,10 +657,10 @@
  purchaseListPage
} from "@/api/procurementManagement/procurementLedger.js";
import useFormData from "@/hooks/useFormData.js";
import QRCode from "qrcode";
import useUserStore from "@/store/modules/user";
import {modelList, productTreeList} from "@/api/basicData/product.js";
import dayjs from "dayjs";
import { getCurrentDate } from "@/utils/index.js";
const { proxy } = getCurrentInstance();
const tableData = ref([]);
@@ -909,10 +681,6 @@
const fileList = ref([]);
const userStore = useUserStore();
// 二维码相关变量
const qrCodeDialogVisible = ref(false);
const qrCodeUrl = ref("");
// 订单审批状态显示文本
const approvalStatusText = {
@@ -1672,10 +1440,6 @@
    }
  }
};
// 获取当前日期并格式化为 YYYY-MM-DD
function getCurrentDate() {
  return dayjs().format("YYYY-MM-DD");
}
const mathNum = () => {
  if (!productForm.value.taxRate) {
    proxy.$modal.msgWarning("请先选择税率");
@@ -1756,201 +1520,6 @@
    productData.value = data;
  }
};
// 显示二维码
const showQRCode = async (row) => {
  try {
    // 构建二维码内容,只包含采购合同号(纯文本)
    const qrContent = row.purchaseContractNumber || '';
    // 检查内容是否为空
    if (!qrContent || qrContent.trim() === '') {
      proxy.$modal.msgWarning("该行没有采购合同号,无法生成二维码");
      return;
    }
    qrCodeUrl.value = await QRCode.toDataURL(qrContent, {
      width: 200,
      margin: 2,
      color: {
        dark: '#000000',
        light: '#FFFFFF'
      }
    });
    qrCodeDialogVisible.value = true;
  } catch (error) {
    console.error('生成二维码失败:', error);
    proxy.$modal.msgError("生成二维码失败:" + error.message);
  }
};
// 下载二维码
const downloadQRCode = () => {
  if (!qrCodeUrl.value) {
    proxy.$modal.msgWarning("二维码未生成");
    return;
  }
  try {
    const a = document.createElement('a');
    a.href = qrCodeUrl.value;
    a.download = `采购合同号二维码_${dayjs().format('YYYYMMDDHHmmss')}.png`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    proxy.$modal.msgSuccess("下载成功");
  } catch (error) {
    console.error('下载二维码失败:', error);
    proxy.$modal.msgError("下载失败,请稍后重试");
  }
};
// 扫码新增对话框相关变量
const scanAddDialogVisible = ref(false);
const scanAddForm = reactive({
  scanContent: "",
  purchaseContractNumber: "",
  supplierName: "",
  projectName: "",
  contractAmount: "",
  paymentMethod: "",
  recorderName: "",
  scanRemark: "",
});
const scanAddRules = {
  purchaseContractNumber: [{ required: true, message: "请输入采购合同号", trigger: "blur" }],
  supplierName: [{ required: true, message: "请输入供应商名称", trigger: "blur" }],
  projectName: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
};
// 扫码登记对话框相关变量
const scanDialogVisible = ref(false);
const scanForm = reactive({
  purchaseContractNumber: "",
  supplierName: "",
  projectName: "",
  scanTime: "",
  scannerName: "",
  scanStatus: "未扫码",
  scanRemark: "",
});
const scanRules = {
  scanRemark: [{ required: true, message: "请输入扫码备注", trigger: "blur" }],
};
const scanRecords = ref([]);
// 打开扫码新增对话框
const openScanAddDialog = () => {
  scanAddForm.scanContent = "";
  scanAddForm.purchaseContractNumber = "";
  scanAddForm.supplierName = "";
  scanAddForm.projectName = "";
  scanAddForm.contractAmount = "";
  scanAddForm.paymentMethod = "";
  scanAddForm.recorderName = userStore.nickName;
  scanAddForm.scanRemark = "";
  scanAddDialogVisible.value = true;
};
// 解析扫码内容(模拟解析二维码数据)
const parseScanContent = (content) => {
  if (!content) return;
  // 模拟解析二维码内容,这里可以根据实际需求调整解析逻辑
  // 假设扫码内容格式为:合同号|供应商|项目|金额|付款方式
  const parts = content.split('|');
  if (parts.length >= 3) {
    scanAddForm.purchaseContractNumber = parts[0] || "";
    scanAddForm.supplierName = parts[1] || "";
    scanAddForm.projectName = parts[2] || "";
    scanAddForm.contractAmount = parts[3] || "";
    scanAddForm.paymentMethod = parts[4] || "";
  }
};
// 关闭扫码新增对话框
const closeScanAddDialog = () => {
  scanAddDialogVisible.value = false;
  proxy.resetForm("scanAddFormRef");
};
// 提交扫码新增
const submitScanAdd = async () => {
  try {
    const valid = await proxy.$refs["scanAddFormRef"].validate().catch(() => false);
    if (!valid) {
      return;
    }
    // 构建新增数据
    const newData = {
      purchaseContractNumber: scanAddForm.purchaseContractNumber,
      supplierName: scanAddForm.supplierName,
      projectName: scanAddForm.projectName,
      contractAmount: scanAddForm.contractAmount,
      paymentMethod: scanAddForm.paymentMethod,
      recorderName: scanAddForm.recorderName,
      entryDate: getCurrentDate(),
      remark: scanAddForm.scanRemark,
      type: 2
    };
    // await addOrEditPurchase(newData);
    proxy.$modal.msgSuccess("扫码新增成功!");
    closeScanAddDialog();
    getList(); // 刷新列表
  } catch (error) {
    console.error('提交扫码新增失败:', error);
    proxy.$modal.msgError("提交失败,请稍后重试");
  }
};
// 打开扫码登记对话框
const openScanDialog = (row) => {
  scanForm.purchaseContractNumber = row.purchaseContractNumber;
  scanForm.supplierName = row.supplierName;
  scanForm.projectName = row.projectName;
  scanForm.scanTime = getCurrentDateTime();
  scanForm.scannerName = userStore.nickName;
  scanForm.scanStatus = "未扫码";
  scanForm.scanRemark = "";
  scanRecords.value = [];
  scanDialogVisible.value = true;
};
// 关闭扫码登记对话框
const closeScanDialog = () => {
  scanDialogVisible.value = false;
  proxy.resetForm("scanFormRef");
};
// 提交扫码登记
const submitScan = async () => {
  try {
    const valid = await proxy.$refs["scanFormRef"].validate().catch(() => false);
    if (!valid) {
      return;
    }
    // 添加扫码记录
    scanRecords.value.push({
      ...scanForm,
      id: Date.now(), // 模拟ID
      scanTime: getCurrentDateTime(),
    });
    scanForm.scanStatus = "已扫码";
    scanForm.scanRemark = scanForm.scanRemark || "无";
    proxy.$modal.msgSuccess("扫码登记成功!");
    closeScanDialog();
  } catch (error) {
    console.error('提交扫码登记失败:', error);
    proxy.$modal.msgError("提交失败,请稍后重试");
  }
};
// 获取当前日期时间
function getCurrentDateTime() {
  return dayjs().format("YYYY-MM-DD HH:mm:ss");
}
// 添加行类名方法
const tableRowClassName = ({ row }) => {