234 lines
8.2 KiB
Vue
234 lines
8.2 KiB
Vue
|
<template>
|
|||
|
|
<div class="approval-form">
|
|||
|
|
<!-- 基础信息 -->
|
|||
|
|
<el-card class="card" shadow="hover">
|
|||
|
|
<template #header>
|
|||
|
|
<h3>基础信息</h3>
|
|||
|
|
</template>
|
|||
|
|
<el-form :model="basicInfo" label-width="120px">
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<el-form-item label="订单编号">
|
|||
|
|
<el-input v-model="basicInfo.orderNo" disabled />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<el-form-item label="创建时间">
|
|||
|
|
<el-input v-model="basicInfo.createTime" disabled />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<el-form-item label="经办人">
|
|||
|
|
<el-input v-model="basicInfo.handler" disabled />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="所属部门">
|
|||
|
|
<el-select v-model="basicInfo.dept" placeholder="请选择">
|
|||
|
|
<el-option label="运维部" value="运维部" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="采购类型">
|
|||
|
|
<el-select v-model="basicInfo.purchaseType" placeholder="请选择">
|
|||
|
|
<el-option label="项目业务" value="项目业务" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-form-item label="申请原因">
|
|||
|
|
<el-input v-model="basicInfo.applyReason" type="textarea" :rows="2" placeholder="请输入申请原因" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</el-card>
|
|||
|
|
|
|||
|
|
<!-- 供应商信息 -->
|
|||
|
|
<el-card class="card" shadow="hover" style="margin-top: 20px">
|
|||
|
|
<template #header>
|
|||
|
|
<h3>供应商信息</h3>
|
|||
|
|
</template>
|
|||
|
|
<el-form :model="supplierInfo" label-width="120px">
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="供应商单位">
|
|||
|
|
<el-select v-model="supplierInfo.supplierName" placeholder="请选择">
|
|||
|
|
<el-option label="AAAA精密仪器制造有限公司" value="AAAA精密仪器制造有限公司" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="出货时间">
|
|||
|
|
<el-select v-model="supplierInfo.deliveryTime" placeholder="请选择">
|
|||
|
|
<el-option label="2年零4个月" value="2年零4个月" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-form>
|
|||
|
|
</el-card>
|
|||
|
|
|
|||
|
|
<!-- 产品信息 -->
|
|||
|
|
<el-card class="card" shadow="hover" style="margin-top: 20px">
|
|||
|
|
<template #header>
|
|||
|
|
<h3>产品信息</h3>
|
|||
|
|
</template>
|
|||
|
|
<el-table :data="productInfo.tableData" border style="width: 100%">
|
|||
|
|
<el-table-column prop="productName" label="产品名称" />
|
|||
|
|
<el-table-column prop="productModel" label="产品型号" />
|
|||
|
|
<el-table-column prop="productPrice" label="产品单价" align="center" :cell-style="{ background: 'pink' }" />
|
|||
|
|
<el-table-column prop="buyQuantity" label="购买数量" align="center" :cell-style="{ background: 'pink' }" />
|
|||
|
|
<el-table-column prop="usage" label="用途" />
|
|||
|
|
<el-table-column prop="total" label="合计" />
|
|||
|
|
</el-table>
|
|||
|
|
</el-card>
|
|||
|
|
|
|||
|
|
<!-- 合同条款 -->
|
|||
|
|
<el-card class="card" shadow="hover" style="margin-top: 20px">
|
|||
|
|
<template #header>
|
|||
|
|
<h3>合同条款</h3>
|
|||
|
|
</template>
|
|||
|
|
<el-form :model="contractInfo" label-width="120px">
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="付款条件">
|
|||
|
|
<el-select v-model="contractInfo.paymentCondition" placeholder="请选择">
|
|||
|
|
<el-option label="银行卡" value="银行卡" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="发票开具方式">
|
|||
|
|
<el-select v-model="contractInfo.invoiceWay" placeholder="请选择">
|
|||
|
|
<el-option label="请选择" value="请选择" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-form>
|
|||
|
|
</el-card>
|
|||
|
|
|
|||
|
|
<!-- 附件 -->
|
|||
|
|
<el-card class="card" shadow="hover" style="margin-top: 20px">
|
|||
|
|
<template #header>
|
|||
|
|
<h3>附件</h3>
|
|||
|
|
</template>
|
|||
|
|
<el-upload class="upload-demo" action="#" :file-list="fileList" :auto-upload="false"
|
|||
|
|
:on-preview="handlePreview">
|
|||
|
|
<el-table :data="fileList" border style="width: 100%">
|
|||
|
|
<el-table-column prop="name" label="文件名" width="300" />
|
|||
|
|
<el-table-column prop="size" label="大小" width="100" />
|
|||
|
|
<el-table-column label="操作" width="100">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<!-- <el-link type="primary" @click="handlePreview(scope.row)"> -->
|
|||
|
|
<el-link type="primary">
|
|||
|
|
预览
|
|||
|
|
</el-link>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</el-upload>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref } from 'vue';
|
|||
|
|
|
|||
|
|
// 基础信息数据
|
|||
|
|
const basicInfo = ref({
|
|||
|
|
orderNo: '0035455',
|
|||
|
|
createTime: '2023-11-02 16:32',
|
|||
|
|
handler: '李四',
|
|||
|
|
dept: '运维部',
|
|||
|
|
purchaseType: '项目业务',
|
|||
|
|
applyReason:
|
|||
|
|
'随着业务拓展，光伏电站业务负责增加，现有设备已运行5年，部分出现效率下降情况。为保证电站正常运行，计划采购一批新的逆变器替换老旧设备，并补充备件库存。',
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 供应商信息数据
|
|||
|
|
const supplierInfo = ref({
|
|||
|
|
supplierName: 'AAAA精密仪器制造有限公司',
|
|||
|
|
deliveryTime: '2年零4个月',
|
|||
|
|
remark: '',
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 产品信息数据
|
|||
|
|
const productInfo = ref({
|
|||
|
|
tableData: [
|
|||
|
|
{
|
|||
|
|
productName: 'AAABBBCCC',
|
|||
|
|
productModel: '15-42',
|
|||
|
|
productPrice: 500,
|
|||
|
|
buyQuantity: 10,
|
|||
|
|
usage: '组件',
|
|||
|
|
total: 5000,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
remark: '',
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 合同条款数据
|
|||
|
|
const contractInfo = ref({
|
|||
|
|
paymentCondition: '银行卡',
|
|||
|
|
invoiceWay: '请选择',
|
|||
|
|
remark: '',
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 附件数据
|
|||
|
|
const fileList = ref([
|
|||
|
|
{
|
|||
|
|
name: 'MWwwwww.jpg',
|
|||
|
|
size: '30kb',
|
|||
|
|
url: '',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '231234124w.zip',
|
|||
|
|
size: '50kb',
|
|||
|
|
url: '',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '12451asdas.doc',
|
|||
|
|
size: '80kb',
|
|||
|
|
url: '',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '21seasda.xls',
|
|||
|
|
size: '29kb',
|
|||
|
|
url: '',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '12kjaklskw.png',
|
|||
|
|
size: '16kb',
|
|||
|
|
url: '',
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
// 预览文件
|
|||
|
|
const handlePreview = (file) => {
|
|||
|
|
console.log('预览文件：', file);
|
|||
|
|
// 实际场景可在这里处理文件预览逻辑，如打开新窗口等
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.approval-form {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card {
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.error-tip {
|
|||
|
|
color: red;
|
|||
|
|
font-size: 12px;
|
|||
|
|
margin-top: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep(.el-input__inner) {
|
|||
|
|
color: red;
|
|||
|
|
}
|
|||
|
|
</style>
|