|
|
@@ -0,0 +1,372 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="header-btn" style="width: 1200px; margin: 0 auto; text-align: right;">
|
|
|
+ <el-button type="primary">下载</el-button>
|
|
|
+ <el-button type="primary">打印</el-button>
|
|
|
+ <el-button type="primary" @click="handleAddClick">新增</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="doc-page">
|
|
|
+ <h3 class="page-title" style="margin: 24px 0 20px;">委外项目管理</h3>
|
|
|
+ <table class="doc-table">
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td class="doc-label">研发项目名称</td>
|
|
|
+ <td class="doc-input">
|
|
|
+ <project-select v-model="currProjectId"></project-select>
|
|
|
+ </td>
|
|
|
+ <td class="doc-label">研发项目编号</td>
|
|
|
+ <td class="doc-input">{{ selProject.xmsqdw }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td colspan="4">
|
|
|
+ <table class="child-table">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <td width="10%">受托方全称</td>
|
|
|
+ <td width="10%">受托方类型</td>
|
|
|
+ <td width="10%">合同名称</td>
|
|
|
+ <td width="10%">委外费用金额(万元)</td>
|
|
|
+ <td width="8%">是否完成技术合同登记</td>
|
|
|
+ <td width="8%">技术合同登记类型</td>
|
|
|
+ <td width="8%">技术合同登记金额(万元)</td>
|
|
|
+ <td width="31%">附件上传</td>
|
|
|
+ <td width="5%">操作</td>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="(item, index) of list" :key="index">
|
|
|
+ <td v-for="key of colKey" :key="key">
|
|
|
+ <template v-if="key == 'fileTypeList'">
|
|
|
+ <div class="file-list">
|
|
|
+ <div class="file-list-item" v-for="(file, fileIdx) of item[key]" :key="fileIdx">
|
|
|
+ <div class="file-name">{{ file.label }}</div>
|
|
|
+ <div class="file-url">{{ file.url }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <span v-else>{{ item[key] }}</span>
|
|
|
+ </td>
|
|
|
+ <td width="10%">
|
|
|
+ <el-button type="text" @click="handleEditClick(item)">编辑</el-button>
|
|
|
+ <el-button type="text" style="margin-left: 0;">删除</el-button>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <p class="tip">注:可一次上传多个相关文件(文档、表格、图片等)。 支持格式:DOC, PDF, Excel, PNG, JPG, PPT 等。 请确保文件内容清晰有效。</p>
|
|
|
+
|
|
|
+ <el-drawer
|
|
|
+ :visible.sync="drawerVisible"
|
|
|
+ :title="drawerTitle"
|
|
|
+ modal-append-to-body
|
|
|
+ append-to-body
|
|
|
+ size="500px"
|
|
|
+ destroy-on-close
|
|
|
+ >
|
|
|
+ <avue-form v-model="form" :option="option">
|
|
|
+
|
|
|
+ </avue-form>
|
|
|
+ </el-drawer>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import projectSelect from "@/components/project-select";
|
|
|
+
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ projectId: [String, Number]
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ projectSelect
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [{
|
|
|
+ stfmc: '111',
|
|
|
+ stflx: '境内个人',
|
|
|
+ htmc: '333',
|
|
|
+ wwfyje: 20,
|
|
|
+ isDj: '是',
|
|
|
+ htlx: '技术开发合同',
|
|
|
+ htje: 20,
|
|
|
+ fileTypeList: [{
|
|
|
+ label: '技术合同协议',
|
|
|
+ url: 'aaa.doc'
|
|
|
+ }, {
|
|
|
+ label: '委外费用发票',
|
|
|
+ url: 'bbb.doc'
|
|
|
+ }, {
|
|
|
+ label: '技术合同登记证明',
|
|
|
+ url: 'ccc.doc'
|
|
|
+ }, {
|
|
|
+ label: '受托方交付成果',
|
|
|
+ url: 'ddd.doc'
|
|
|
+ }, {
|
|
|
+ label: '其他资料',
|
|
|
+ url: 'eee.doc'
|
|
|
+ }]
|
|
|
+ }],
|
|
|
+ colKey: ['stfmc', 'stflx', 'htmc', 'wwfyje', 'isDj', 'htlx', 'htje', 'fileTypeList'],
|
|
|
+
|
|
|
+ currProjectId: '',
|
|
|
+ selProject: {},
|
|
|
+
|
|
|
+ drawerTitle: '',
|
|
|
+ drawerVisible: false,
|
|
|
+ option:{
|
|
|
+ labelWidth: 170,
|
|
|
+ column:[
|
|
|
+ {
|
|
|
+ label: '受托方全称',
|
|
|
+ prop: 'stfqc',
|
|
|
+ span: 24,
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ message: "请输入受头发全称",
|
|
|
+ trigger: "blur"
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '受托方类型',
|
|
|
+ prop: 'stflx',
|
|
|
+ span: 24,
|
|
|
+ type: 'select',
|
|
|
+ dicUrl: '/api/kd-system/dict-biz/dictionary?code=trustee_type',
|
|
|
+ props: {
|
|
|
+ label: 'dictValue',
|
|
|
+ value: 'dictKey',
|
|
|
+ },
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ message: "请选择受托方类型",
|
|
|
+ trigger: "blur"
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '合同名称',
|
|
|
+ prop: 'htmc',
|
|
|
+ span: 24
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '委外费用金额(万元)',
|
|
|
+ prop: 'htmc',
|
|
|
+ span: 24,
|
|
|
+ type: 'number',
|
|
|
+ min: 0,
|
|
|
+ precision: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '是否完成技术合同登记',
|
|
|
+ prop: 'sfwcjshtdj',
|
|
|
+ span: 24,
|
|
|
+ type: 'select',
|
|
|
+ dicUrl: '/api/kd-system/dict-biz/dictionary?code=yes_or_no',
|
|
|
+ props: {
|
|
|
+ label: 'dictValue',
|
|
|
+ value: 'dictKey',
|
|
|
+ },
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ message: "请选择",
|
|
|
+ trigger: "blur"
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '技术合同类型',
|
|
|
+ prop: 'jshtlx',
|
|
|
+ span: 24,
|
|
|
+ type: 'select',
|
|
|
+ dicUrl: '/api/kd-system/dict-biz/dictionary?code=contract_registration_type',
|
|
|
+ props: {
|
|
|
+ label: 'dictValue',
|
|
|
+ value: 'dictKey',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '技术合同登记金额(万元)',
|
|
|
+ prop: 'htmc',
|
|
|
+ span: 24,
|
|
|
+ type: 'number',
|
|
|
+ min: 0,
|
|
|
+ precision: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "技术合同协议",
|
|
|
+ prop: "jshtxy",
|
|
|
+ type: "upload",
|
|
|
+ multiple: true,
|
|
|
+ span: 24,
|
|
|
+ dataType: "object",
|
|
|
+ propsHttp: {
|
|
|
+ url: "link",
|
|
|
+ name: "originalName",
|
|
|
+ res: "data",
|
|
|
+ },
|
|
|
+ action: '/api/kd-resource/oss/endpoint/put-file',
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ label: "委外费用发票",
|
|
|
+ prop: "wwfyfp",
|
|
|
+ type: "upload",
|
|
|
+ multiple: true,
|
|
|
+ span: 24,
|
|
|
+ dataType: "object",
|
|
|
+ propsHttp: {
|
|
|
+ url: "link",
|
|
|
+ name: "originalName",
|
|
|
+ res: "data",
|
|
|
+ },
|
|
|
+ action: '/api/kd-resource/oss/endpoint/put-file',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "技术合同登记证明",
|
|
|
+ prop: "jshtdjzm",
|
|
|
+ type: "upload",
|
|
|
+ multiple: true,
|
|
|
+ span: 24,
|
|
|
+ dataType: "object",
|
|
|
+ propsHttp: {
|
|
|
+ url: "link",
|
|
|
+ name: "originalName",
|
|
|
+ res: "data",
|
|
|
+ },
|
|
|
+ action: '/api/kd-resource/oss/endpoint/put-file',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "受托方交付成果",
|
|
|
+ prop: "stfjfcg",
|
|
|
+ type: "upload",
|
|
|
+ multiple: true,
|
|
|
+ span: 24,
|
|
|
+ dataType: "object",
|
|
|
+ propsHttp: {
|
|
|
+ url: "link",
|
|
|
+ name: "originalName",
|
|
|
+ res: "data",
|
|
|
+ },
|
|
|
+ action: '/api/kd-resource/oss/endpoint/put-file',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "其他资料",
|
|
|
+ prop: "qtzl",
|
|
|
+ type: "upload",
|
|
|
+ multiple: true,
|
|
|
+ span: 24,
|
|
|
+ dataType: "object",
|
|
|
+ propsHttp: {
|
|
|
+ url: "link",
|
|
|
+ name: "originalName",
|
|
|
+ res: "data",
|
|
|
+ },
|
|
|
+ action: '/api/kd-resource/oss/endpoint/put-file',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ form: {},
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleAddClick() {
|
|
|
+ this.drawerVisible = true;
|
|
|
+ this.drawerTitle = '新增委外信息';
|
|
|
+ },
|
|
|
+ handleEditClick(data) {
|
|
|
+ this.drawerVisible = true;
|
|
|
+ this.form = { ...data };
|
|
|
+ this.drawerTitle = '编辑委外信息';
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.page-title {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.doc-page {
|
|
|
+ width: 1200px;
|
|
|
+ margin: 30px auto;
|
|
|
+}
|
|
|
+.doc-table {
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid #333;
|
|
|
+}
|
|
|
+.doc-label {
|
|
|
+ text-align: center;
|
|
|
+ padding: 6px;
|
|
|
+ color: #777;
|
|
|
+ font-size: 14px;
|
|
|
+ width: 15%;
|
|
|
+}
|
|
|
+.doc-input {
|
|
|
+ text-align: center;
|
|
|
+ color: #333;
|
|
|
+ width: 35%;
|
|
|
+}
|
|
|
+.doc-table tr td {
|
|
|
+ border: 1px solid #333;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.child-table tr {
|
|
|
+ td {
|
|
|
+ border: none;
|
|
|
+ border-right: 1px solid #333;
|
|
|
+ // padding: 6px;
|
|
|
+ padding: 0 6px;
|
|
|
+ text-align: center;
|
|
|
+ color: #666;
|
|
|
+ font-size: 14px;
|
|
|
+ &:last-child {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.child-table thead tr {
|
|
|
+ border-bottom: 1px solid #333;
|
|
|
+}
|
|
|
+
|
|
|
+.child-table tbody tr {
|
|
|
+ border-bottom: 1px solid #333;
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.file-list {
|
|
|
+ &-item {
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1px solid #333;
|
|
|
+ line-height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ .file-name {
|
|
|
+ width: 40%;
|
|
|
+ border-right: 1px solid #333;
|
|
|
+ }
|
|
|
+ .file-url {
|
|
|
+ width: 60%;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.tip {
|
|
|
+ color: red;
|
|
|
+ margin-top: 12px;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+</style>
|