更新项目合同

src/styles/project/contract/form.scoped.scss

@@ -25,6 +25,14 @@
             margin-top: 64px;
         }
     }
+    &.hc-card-form-center {
+        justify-content: center;
+        align-items: center;
+        .base-form-box {
+            flex: initial;
+            width: 700px;
+        }
+    }
 }
 
 .hc-project-contract-form-file {

src/views/project/contract/components/base.vue

@@ -1,6 +1,6 @@
 <template>
     <HcCard actionUi="text-center">
-        <div class="hc-project-contract-form-base">
+        <div class="hc-project-contract-form-base" :class="isDisabled ? 'hc-card-form-center' : ''">
             <div class="base-form-box">
                 <el-scrollbar>
                     <el-form ref="formBaseRef"
@@ -33,7 +33,7 @@
                             <el-date-picker class="block" v-model="formInvoiceModel.key5" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
                         </el-form-item>
                         <el-form-item label="合同起止日期：" prop="key2">
-                            <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate"/>
+                            <HcDatePicker :dates="betweenTime" clearable :disabled="isDisabled" @change="betweenTimeUpdate"/>
                         </el-form-item>
                         <el-form-item label="对方单位回款联系人名称：">
                             <el-input v-model="formInvoiceModel.key1"/>
@@ -50,7 +50,7 @@
                     </el-form>
                 </el-scrollbar>
             </div>
-            <div class="base-invoice-box">
+            <div class="base-invoice-box" v-if="!isDisabled">
                 <el-scrollbar>
                     <div class="title">开票相关信息</div>
                     <div class="invoice-form">

src/views/project/contract/components/file.vue

@@ -1,6 +1,6 @@
 <template>
     <HcCard actionUi="text-center">
-        <div class="hc-tabs-simple-extra-btn" v-if="infoData.pdfUrl">
+        <div class="hc-tabs-simple-extra-btn" v-if="infoData.pdfUrl && !isDisabled">
             <el-button size="large" type="primary" hc-btn @click="reuploadClick">
                 <HcIcon name="upload-cloud-2"/>
                 <span>点击重新上传</span>
@@ -12,9 +12,10 @@
                 <HcPdf :src="infoData.pdfUrl"/>
             </div>
             <div class="hc-form-file-upload" v-show="!infoData.pdfUrl">
-                <HcUploadFile ref="HcUploadFileRef" :options="UploadFileOptions" @success="HcUploadFileSuccess" drop>
+                <HcUploadFile ref="HcUploadFileRef" :options="UploadFileOptions" @success="HcUploadFileSuccess" drop v-if="!isDisabled">
                     <div class="accept-tip">支持的文件格式：图片(png、jpg、jpeg)、 Excel(xls、xlsx) PDF 、Word(doc、docx)</div>
                 </HcUploadFile>
+                <HcStatus text="未上传相关附件文件" v-else/>
             </div>
         </div>
 

src/views/project/contract/components/milestone.vue

@@ -2,26 +2,30 @@
     <HcCard actionUi="text-center">
         <HcTable :column="tableColumn" :datas="tableData">
             <template #key1="{row,index}">
-                <el-input v-model="row.key1"/>
+                <span v-if="isDisabled">{{row.key1}}</span>
+                <el-input v-model="row.key1" v-else/>
             </template>
             <template #key2="{row,index}">
-                <el-date-picker class="block" v-model="row.key2" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
+                <span v-if="isDisabled">{{row.key2}}</span>
+                <el-date-picker class="block" v-model="row.key2" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" v-else/>
             </template>
             <template #key3="{row,index}">
-                <el-input v-model="row.key3"/>
+                <span v-if="isDisabled">{{row.key3}}</span>
+                <el-input v-model="row.key3" v-else/>
             </template>
             <template #key6="{row,index}">
-                <el-select v-model="row.key6">
+                <span v-if="isDisabled">{{row.key6}}</span>
+                <el-select v-model="row.key6" v-else>
                     <el-option label="选项1" value="选项1"/>
                     <el-option label="选项2" value="选项2"/>
                 </el-select>
             </template>
             <template #action="{row,index}">
-                <el-button size="small" type="primary">
+                <el-button size="small" type="primary" :disabled="isDisabled">
                     <HcIcon name="add"/>
                     <span>新增</span>
                 </el-button>
-                <el-button size="small" type="danger">
+                <el-button size="small" type="danger" :disabled="isDisabled">
                     <HcIcon name="delete-bin"/>
                     <span>删除</span>
                 </el-button>

src/views/project/contract/components/record.vue

@@ -0,0 +1,74 @@
+<template>
+    <HcCard actionUi="text-center">
+        <HcTable :column="tableColumn" :datas="tableData">
+            <template #action="{row,index}">
+                <span class="text-blue" @click="rowNameTap(row)">查看发票</span>
+            </template>
+        </HcTable>
+        <template #action>
+            <el-button size="large" type="info" hc-btn @click="goBackClick">
+                <HcIcon name="arrow-go-back"/>
+                <span>返回上一级</span>
+            </el-button>
+        </template>
+
+        <!--查看发票-->
+        <HcDialog bgColor="#ffffff" isToBody isTable :footer="false" :show="recordModal" title="发票信息" widths="66rem" @close="closeRecordClick">
+            <HcPdf src="http://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20230504/911982ba85e66cfa58fb02d5a738bb2b.pdf"/>
+        </HcDialog>
+    </HcCard>
+</template>
+
+<script setup>
+import {ref, watch} from "vue";
+import {useRouter} from 'vue-router'
+
+const router = useRouter()
+
+//参数
+const props = defineProps({
+    datas: {
+        type: Object,
+        default: () => ({})
+    }
+})
+
+const infoData = ref(props.datas)
+
+//深度监听
+watch(() => [
+    props.datas,
+], ([datas]) => {
+    infoData.value = datas
+}, {deep: true})
+
+//成本测算表格
+const tableColumn = [
+    {key: 'key1', name: '开票日期',  align: 'center'},
+    {key: 'key2', name: '对方名称',  align: 'center'},
+    {key: 'key3', name: '开票金额', align: 'center'},
+    {key: 'action', name: '发票附件',  align: 'center'},
+]
+const tableData = ref([
+    {id: 1}, {id: 2}, {id: 3}, {id: 4},
+])
+
+//查看发票
+const recordModal = ref(false)
+const rowNameTap = (row) => {
+    recordModal.value = true
+}
+
+const closeRecordClick = () => {
+    recordModal.value = false
+}
+
+//返回
+const goBackClick = () => {
+    router.back()
+}
+</script>
+
+<style scoped lang="scss">
+@import "~src/styles/project/contract/form.scoped.scss";
+</style>

src/views/project/contract/form.vue

@@ -9,6 +9,9 @@
         <template #tab-milestone>
             <milestoneTab :datas="infoData" :disabled="dataType === 'view'" v-if="tabsKey === 'milestone'"/>
         </template>
+        <template #tab-record>
+            <recordTabCard :datas="infoData" v-if="tabsKey === 'record'"/>
+        </template>
     </HcTabsSimple>
 </template>
 
@@ -18,6 +21,8 @@ import {useRouter, useRoute} from 'vue-router'
 import baseTabCard from "./components/base.vue";
 import fileTabCard from "./components/file.vue";
 import milestoneTab from "./components/milestone.vue";
+import recordTabCard from "./components/record.vue";
+import {arrIndex} from "js-fast-way";
 
 //初始变量
 const router = useRouter()
@@ -29,8 +34,29 @@ const dataType = ref(useRoutes?.query?.type ?? '')
 onActivated(() => {
     dataId.value = useRoutes?.query?.id ?? ''
     dataType.value = useRoutes?.query?.type ?? ''
+    setTabsData()
 })
 
+//设置选项卡数据
+const setTabsData = () => {
+    const index = arrIndex(tabsData.value, 'key', 'record')
+    if (dataType.value === 'view') {
+        //预览模式下，索引不存在，就添加此选项
+        if (index === -1)  {
+            tabsData.value.push({
+                icon: 'file-history',
+                label: '合同开票记录',
+                key: 'record'
+            })
+        }
+    } else {
+        //编辑模式下，索引存在，就删除此选项
+        if (index !== -1) {
+            tabsData.value.splice(index, 1)
+        }
+    }
+}
+
 //选项卡
 const tabsKey = ref('base')
 const tabsData = ref([
@@ -43,5 +69,7 @@ const tabsClick = (key) => {
 }
 
 const infoData = ref({})
+const isNoDropShadow = ref(false)
+
 
 </script>

src/views/project/contract/update.vue

@@ -1,116 +1,52 @@
 <template>
-    <HcCard>
+    <HcCard actionUi="text-center">
         <template #header>
-            <el-form ref="formRef" inline :model="formModel" :rules="formRules">
-                <el-form-item label="关联项目" prop="key1">
-                    <el-select v-model="formModel.key1" block clearable placeholder="项目名称">
-                        <el-option v-for="item in projectName" :label="item.name" :value="item.key"/>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="预算制订人" prop="key2">
-                    <el-input v-model="formModel.key2" placeholder="预算制订人" />
-                </el-form-item>
-                <el-form-item label="预算总额" prop="key3">
-                    <el-input v-model="formModel.key3" placeholder="预算总额" disabled>
-                        <template #append>元</template>
-                    </el-input>
-                </el-form-item>
-            </el-form>
+            <div class="w-48">
+                <el-select block clearable placeholder="请选择合同名称" size="large">
+                    <el-option v-for="item in projectName" :label="item.name" :value="item.key"/>
+                </el-select>
+            </div>
         </template>
-        <template #extra>
-            <el-button type="primary" hc-btn @click="addTableData">
-                <HcIcon name="add"/>
-                <span>新增预算</span>
+        <div class="hc-table-ref-box no-border hc-project-contract-update-data">
+            <el-table :data="tableData" border
+                      :header-cell-style="tableHeaderCellStyle"
+                      :row-style="tableRowStyle"
+                      style="width: 100%; height: 100%"
+            >
+                <el-table-column prop="key1" label="回款条件" align="center"/>
+                <el-table-column prop="key2" label="应收款时间" align="center"/>
+                <el-table-column prop="key3" label="应收回款金额" align="center"/>
+                <el-table-column prop="key4" label="实际回款时间" align="center">
+                    <template #default="{ row }">
+                        <span v-if="row.key4">{{row.key4}}</span>
+                        <el-date-picker class="block" v-model="row.key4" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" v-else/>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="key5" label="实际回款金额" align="center">
+                    <template #default="{ row }">
+                        <span v-if="row.key5">{{row.key5}}</span>
+                        <el-input v-model="row.key5" v-else/>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="key6" label="催款执行人" align="center"/>
+            </el-table>
+        </div>
+        <template #action>
+            <el-button size="large" type="info" hc-btn @click="goBackClick">
+                <HcIcon name="arrow-go-back"/>
+                <span>取消并返回</span>
+            </el-button>
+            <el-button size="large" type="primary" hc-btn @click="saveClick">
+                <HcIcon name="check-double"/>
+                <span>提交保存</span>
             </el-button>
         </template>
-        <HcTable :isIndex="false" :column="tableColumn" :datas="tableData">
-            <template #key1="{row,index}">
-                <el-select v-model="row.key1" placeholder="项目进程" v-if="row.isEditMode">
-                    <el-option v-for="item in projectProcess" :label="item.name" :value="item.key"/>
-                </el-select>
-                <div v-else>{{row.key1}}</div>
-            </template>
-            <template #key2="{row,index}">
-                <el-select v-model="row.key2" placeholder="预算类型" v-if="row.isEditMode">
-                    <el-option v-for="item in budgetType" :label="item.name" :value="item.key"/>
-                </el-select>
-                <div v-else>{{row.key2}}</div>
-            </template>
-            <template #key3="{row,index}">
-                <el-select v-model="row.key3" placeholder="任务明细" v-if="row.isEditMode">
-                    <el-option v-for="item in taskDetail" :label="item.name" :value="item.key"/>
-                </el-select>
-                <div v-else>{{row.key3}}</div>
-            </template>
-            <template #key4="{row,index}">
-                <el-input v-model="row.key4" v-if="row.isEditMode"/>
-                <div v-else>{{row.key4}}</div>
-            </template>
-            <template #key5="{row,index}">
-                <el-input v-model="row.key5" v-if="row.isEditMode"/>
-                <div v-else>{{row.key5}}</div>
-            </template>
-            <template #key6="{row,index}">
-                <el-select v-model="row.key6" v-if="row.isEditMode">
-                    <el-option label="维护" value="1"/>
-                    <el-option label="业务" value="2"/>
-                </el-select>
-                <div v-else>{{row.key6}}</div>
-            </template>
-            <template #key7="{row,index}">
-                <el-input v-model="row.key7" v-if="row.isEditMode" disabled/>
-                <div v-else>{{row.key7}}</div>
-            </template>
-            <template #key8="{row,index}">
-                <el-input v-model="row.key8" v-if="row.isEditMode"/>
-                <div v-else>{{row.key8}}</div>
-            </template>
-            <template #key9="{row,index}">
-                <el-input v-model="row.key9" v-if="row.isEditMode"/>
-                <div v-else>{{row.key9}}</div>
-            </template>
-            <template #key10="{row,index}">
-                <el-input v-model="row.key10" v-if="row.isEditMode"/>
-                <div v-else>{{row.key10}}</div>
-            </template>
-            <template #key11="{row,index}">
-                <el-input v-model="row.key11" v-if="row.isEditMode" disabled/>
-                <div v-else>{{row.key11}}</div>
-            </template>
-            <template #key12="{row,index}">
-                <el-input v-model="row.key12" v-if="row.isEditMode"/>
-                <div v-else>{{row.key12}}</div>
-            </template>
-            <template #key13="{row,index}">
-                <el-input v-model="row.key13" v-if="row.isEditMode" disabled/>
-                <div v-else>{{row.key13}}</div>
-            </template>
-            <template #key14="{row,index}">
-                <el-input v-model="row.key14" v-if="row.isEditMode"/>
-                <div v-else>{{row.key14}}</div>
-            </template>
-            <template #action="{row,index}">
-                <el-button size="small" type="primary" @click="row.isEditMode = false" v-if="row.isEditMode">
-                    <HcIcon name="check"/>
-                    <span>完成</span>
-                </el-button>
-                <el-button size="small" type="primary" @click="row.isEditMode = true" v-else>
-                    <HcIcon name="edit"/>
-                    <span>编辑</span>
-                </el-button>
-                <el-button size="small" type="danger" @click="delTableData(row,index)">
-                    <HcIcon name="delete-bin"/>
-                    <span>删除</span>
-                </el-button>
-            </template>
-        </HcTable>
     </HcCard>
 </template>
 
 <script setup>
 import {onActivated, ref} from "vue";
 import {useRouter, useRoute} from 'vue-router'
-import {delMessage} from "~uti/tools";
 
 //初始变量
 const router = useRouter()
@@ -129,109 +65,39 @@ const projectName = ref([
     {name: '奉建路', key: '奉建路'}
 ])
 
-//项目进程
-const projectProcess = ref([
-    {name: '商机-演示沟通', key: '1'},
-    {name: '商机-成本核算及报价', key: '2'},
-    {name: '合同-服务范围洽谈', key: '3'},
-    {name: '产品-研发', key: '4'},
-    {name: '产品-配置', key: '5'},
-    {name: '产品-测试', key: '6'},
-    {name: '产品-交付', key: '7'},
-    {name: '实施-系统培训', key: '8'},
-    {name: '实施-现场服务', key: '9'},
-    {name: '实施-合同回款', key: '10'},
-    {name: '项目验收', key: '11'},
-])
-
-//预算类型
-const budgetType = ref([
-    {name: '合同签订阶段', key: '1'},
-    {name: '项目注册阶段', key: '2'},
-    {name: '项目准备阶段', key: '3'},
-    {name: '项目研发阶段', key: '4'},
-    {name: '项目配置阶段', key: '5'},
-    {name: '项目测试阶段', key: '6'},
-    {name: '项目培训阶段', key: '7'},
-    {name: '项目编辑阶段', key: '8'},
-    {name: '资料编辑阶段', key: '9'},
-    {name: '过程服务阶段', key: '10'},
-    {name: '交工阶段', key: '11'},
-    {name: '资料收集阶段', key: '12'},
-    {name: '竣工编辑阶段', key: '13'},
-    {name: '档案验收阶段', key: '14'},
-    {name: '档案移交阶段', key: '15'},
-    {name: '耗材', key: '16'},
+//表格数据
+const tableData = ref([
+    {id: 1, key1: 'xxxx', key2: '222', key3: '333', key4: '', key5: '', key6: '666'},
+    {id: 2, key1: '', key2: '', key3: '', key4: '22', key5: '33', key6: ''},
+    {id: 3, key1: '', key2: '', key3: '', key4: '22', key5: '33', key6: ''},
 ])
 
-//任务明细
-const taskDetail = ref([
-    {name: '审核图纸', key: '1'},
-    {name: '风险评估', key: '2'},
-    {name: '合同报价', key: '3'},
-    {name: '合同洽谈及签订', key: '4'},
-    {name: '项目注册', key: '5'},
-    {name: '数据配置', key: '6'},
-    {name: '项目WBS划分', key: '7'},
-])
+//自定义表头样式
+const tableHeaderCellStyle = () => {
+    return {backgroundColor: '#93D2F3', color: '#101010'}
+}
 
-//顶部表单数据
-const formRef = ref(null)
-const formModel = ref({key1: '', key2: '', key3: ''})
-const formRules = {
-    key1: {
-        required: true,
-        trigger: 'blur',
-        message: "请选择关联项目"
-    },
-    key2: {
-        required: true,
-        trigger: 'blur',
-        message: "请输入预算制订人"
+//自定义行的样式
+const tableRowStyle = ({ row }) => {
+    if (row.key4 === '' || row.key5 === '') {
+        return {backgroundColor: '#BD3124', color: '#fff'}
     }
 }
 
-//工资预算表格
-const tableColumn = [
-    {key: 'key1', name: '项目环节', width: '200'},
-    {key: 'key2', name: '预算类型', width: '200'},
-    {key: 'key3', name: '任务明细', width: '200'},
-    {key: 'key4', name: '预计工作日(小数/整数/天)', width: '160'},
-    {key: 'key5', name: '投入人员数量', width: '140'},
-    {key: 'key6', name: '人日单价', width: '140'},
-    {key: 'key7', name: '预计人工成本', width: '160'},
-    {key: 'key8', name: '预计差旅费(元)', width: '160'},
-    {key: 'key9', name: '外包单价', width: '140'},
-    {key: 'key10', name: '外包数量', width: '140'},
-    {key: 'key11', name: '外包金额', width: '140'},
-    {key: 'key12', name: '其他', width: '140'},
-    {key: 'key13', name: '预算金额', width: '120'},
-    {key: 'key14', name: '测算备注', width: '200'},
-    {key: 'action', name: '操作', width: '160', align: 'center', fixed: 'right'},
-]
-const tableData = ref([
-    {id: 1, key1: '', key2: '', key3: '', key4: '33', key5: '44', key6: '', key7: '22', isEditMode: false},
-])
-
-//新增工资预算表格
-const addTableData = () => {
-    tableData.value.unshift({isEditMode: true})
+//返回
+const goBackClick = () => {
+    router.back()
 }
 
-//删除工资预算表格
-const delTableData = (row,index) => {
-    delMessage(() => {
-        if (!row.id)  {
-            tableData.value.splice(index, 1)
-        }
-    })
+//提交保存
+const saveClick = () => {
+
 }
 </script>
 
-<style lang="scss" scoped>
-
-</style>
-
 <style lang="scss">
-
+.hc-project-contract-update-data .el-table {
+    --el-table-border-color: #b7b7b7;
+    --el-table-row-hover-bg-color: inherit;
+}
 </style>