feat(ctr): 优化合同管理功能

- 优化富文本编辑器组件，增加占位符功能 - 在费用合同和收入合同列表中添加支付方式列 - 增加合同内容详情对话框，用于查看分包内容 - 在收入合同列表中添加修改合同功能 - 根据合同类型动态显示承包内容或合同内容
2025-08-22 21:08:56 +08:00
parent 984ec9c4fb
commit 169f5ae376
5 changed files with 352 additions and 30 deletions
--- a/src/components/Editor/index.vue
+++ b/src/components/Editor/index.vue
@ -1,28 +1,14 @@
 <template>
  <div>
-    <el-upload
-      v-if="type === 'url'"
-      :action="upload.url"
-      :before-upload="handleBeforeUpload"
-      :on-success="handleUploadSuccess"
-      :on-error="handleUploadError"
-      class="editor-img-uploader"
-      name="file"
-      :show-file-list="false"
-      :headers="upload.headers"
-    >
+    <el-upload v-if="type === 'url'" :action="upload.url" :before-upload="handleBeforeUpload"
+      :on-success="handleUploadSuccess" :on-error="handleUploadError" class="editor-img-uploader" name="file"
+      :show-file-list="false" :headers="upload.headers">
      <i ref="uploadRef"></i>
    </el-upload>
  </div>
  <div class="editor">
-    <quill-editor
-      ref="quillEditorRef"
-      v-model:content="content"
-      content-type="html"
-      :options="options"
-      :style="styles"
-      @text-change="(e: any) => $emit('update:modelValue', content)"
-    />
+    <quill-editor ref="quillEditorRef" v-model:content="content" content-type="html" :options="options" :style="styles"
+      @text-change="(e: any) => $emit('update:modelValue', content)" />
  </div>
 </template>

@ -47,7 +33,9 @@ const props = defineProps({
  /* 上传文件大小限制(MB) */
  fileSize: propTypes.number.def(5),
  /* 类型（base64格式、url格式） */
-  type: propTypes.string.def('url')
+  type: propTypes.string.def('url'),
+  /* 占位符 */
+  placeholder: propTypes.string.def('请输入内容'),
 });

 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@ -90,7 +78,7 @@ const options = ref<any>({
      }
    }
  },
-  placeholder: '请输入内容',
+  placeholder: props.placeholder,
  readOnly: props.readOnly
 });

@ -166,77 +154,96 @@ const handleUploadError = (err: any) => {
 .editor-img-uploader {
  display: none;
 }
+
 .editor,
 .ql-toolbar {
  white-space: pre-wrap !important;
  line-height: normal !important;
 }
+
 .quill-img {
  display: none;
 }
+
 .ql-snow .ql-tooltip[data-mode='link']::before {
  content: '请输入链接地址:';
 }
+
 .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0;
  content: '保存';
  padding-right: 0;
 }
+
 .ql-snow .ql-tooltip[data-mode='video']::before {
  content: '请输入视频地址:';
 }
+
 .ql-snow .ql-picker.ql-size .ql-picker-label::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: '14px';
 }
+
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
  content: '10px';
 }
+
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
  content: '18px';
 }
+
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
  content: '32px';
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: '文本';
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
  content: '标题1';
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
  content: '标题2';
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
  content: '标题3';
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
  content: '标题4';
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
  content: '标题5';
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
  content: '标题6';
 }
+
 .ql-snow .ql-picker.ql-font .ql-picker-label::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: '标准字体';
 }
+
 .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
  content: '衬线字体';
 }
+
 .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
  content: '等宽字体';
--- a/src/views/ctr/expensesContract/index.vue
+++ b/src/views/ctr/expensesContract/index.vue
@ -60,12 +60,18 @@
        <el-table-column type="index" width="50" label="序号" />
        <!-- <el-table-column label="项目ID" align="center" prop="projectId" /> -->
        <el-table-column label="合同编号" align="center" prop="contractCode" />
-        <el-table-column label="合同类型" align="center" prop="contractType" />
+        <!-- <el-table-column label="合同类型" align="center" prop="contractType" /> -->
        <el-table-column label="合同类型" align="center" prop="contractType">
          <template #default="scope">
            <dict-tag :options="expenses_contract_type" :value="scope.row.contractType" />
          </template>
        </el-table-column>
+        <el-table-column label="支付方式" align="center" prop="payType">
+          <template #default="scope">
+            <el-tag type="success" v-if="scope.row.payType == '1'">月结算</el-tag>
+            <el-tag type="primary" v-else-if="scope.row.payType == '2'">形象节点</el-tag>
+          </template>
+        </el-table-column>
        <el-table-column label="供应商" align="center" prop="contractSupplier" />
        <!-- <el-table-column label="分包内容" align="center" prop="contractedContent" /> -->
        <el-table-column label="合同金额" align="center" prop="amount" />
@ -85,9 +91,13 @@
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                v-hasPermi="['ctr:expensesContract:remove']"></el-button>
            </el-tooltip> -->
-            <el-tooltip content="查看附件列表" placement="top">
+
+            <div>
+              <el-button link type="success" icon="View" @click="handleShowDetail(scope.row)">查看分包内容</el-button>
+            </div>
+            <div>
              <el-button link type="primary" icon="View" @click="handleShowFileList(scope.row)">查看附件列表</el-button>
-            </el-tooltip>
+            </div>
          </template>
        </el-table-column>
      </el-table>
@ -128,7 +138,17 @@
      </template>
    </el-dialog>
    <FileList v-model="fileListVisible" :fileList="fileList" />
+    <el-dialog v-model="detailVisible" title="合同内容详情" width="45%">
+      <editor :model-value="detailContent" :min-height="192" readOnly placeholder="" />

+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="detailVisible = false">
+            关闭
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
  </div>
 </template>

@ -156,6 +176,8 @@ const userStore = useUserStore();
 const queryFormRef = ref<ElFormInstance>();
 const expensesContractFormRef = ref<ElFormInstance>();
 const currentProject = computed(() => userStore.selectedProject);
+const detailContent = ref('');
+const detailVisible = ref(false); // 控制承包内容详情对话框的显示

 const dialog = reactive<DialogOption>({
  visible: false,
@ -299,7 +321,10 @@ const handleShowFileList = async (row: ExpensesContractVO) => {
  });

 }
-
+const handleShowDetail = (data) => {
+  detailContent.value = data.contractedContent
+  detailVisible.value = true;
+}
 onMounted(() => {
  getList();
 });
--- a/src/views/ctr/incomeContract/index.vue
+++ b/src/views/ctr/incomeContract/index.vue
@ -61,6 +61,12 @@
            <dict-tag :options="income_contract_type" :value="scope.row.contractType" />
          </template>
        </el-table-column>
+        <el-table-column label="支付方式" align="center" prop="payType">
+          <template #default="scope">
+            <el-tag type="success" v-if="scope.row.payType == '1'">月结算</el-tag>
+            <el-tag type="primary" v-else-if="scope.row.payType == '2'">形象节点</el-tag>
+          </template>
+        </el-table-column>
        <el-table-column label="业主单位" align="center" prop="contractOwner" />
        <!-- <el-table-column label="承包内容" align="center" prop="contractedContent" /> -->
        <el-table-column label="合同金额" align="center" prop="amount" />
@ -82,10 +88,17 @@
            <!-- <el-tooltip content="查看承包内容" placement="top">
              <el-button link type="primary" icon="View" @click="handleDetail(scope.row)">详情</el-button>
            </el-tooltip> -->
-            <el-tooltip content="查看附件列表" placement="top">
-              <el-button link type="primary" icon="View" @click="handleShowFileList(scope.row)">查看附件列表</el-button>
-            </el-tooltip>
+            <div>
+              <el-button link type="primary" icon="edit" @click="handleEdit(scope.row)"
+                v-if="scope.row.isUpdate">修改合同</el-button>
+            </div>
+            <div>
+              <el-button link type="success" icon="View" @click="handleShowDetail(scope.row)">查看分包内容</el-button>

+            </div>
+            <div>
+              <el-button link type="primary" icon="View" @click="handleShowFileList(scope.row)">查看附件列表</el-button>
+            </div>
          </template>
        </el-table-column>
      </el-table>
@ -123,6 +136,17 @@
      </template>
    </el-dialog>
    <FileList v-model="fileListVisible" :fileList="fileList" />
+    <el-dialog v-model="detailVisible" title="承包内容详情" width="45%">
+      <editor :model-value="detailContent" :min-height="192" readOnly placeholder="" />
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="detailVisible = false">
+            关闭
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
  </div>
 </template>

@ -131,9 +155,12 @@ import { listIncomeContract, getIncomeContract, delIncomeContract, addIncomeCont
 import { IncomeContractVO, IncomeContractQuery, IncomeContractForm } from '@/api/ctr/incomeContract/types';
 import FileList from '@/components/FileList/index.vue';
 import useUserStore from '@/store/modules/user';
+import { useRouter } from 'vue-router'
+
 const { proxy } = getCurrentInstance();
 const userStore = useUserStore();
 const currentProject = computed(() => userStore.selectedProject);
+const router = useRouter();

 const { expenses_contract_type, income_contract_type } = toRefs(
  proxy?.useDict('income_contract_type', 'expenses_contract_type')
@ -154,7 +181,8 @@ const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
 });
-
+const detailVisible = ref(false); // 控制承包内容详情对话框的显示
+const detailContent = ref('');
 const initFormData: IncomeContractForm = {
  id: undefined,
  projectId: undefined,
@ -292,7 +320,20 @@ const handleShowFileList = async (row: IncomeContractVO) => {
  });

 }
+const handleEdit = (row: IncomeContractVO) => {
+  // console.log(router);

+  router.push({
+    path: "/ctr/update",
+    query: {
+      id: row.id,
+    }
+  })
+}
+const handleShowDetail = (data) => {
+  detailContent.value = data.contractedContent
+  detailVisible.value = true;
+}
 onMounted(() => {
  getList();
 });
--- a/src/views/ctr/index.vue
+++ b/src/views/ctr/index.vue
@ -33,7 +33,10 @@
                        <el-form-item label="业主单位" prop="contractOwner">
                            <el-input v-model="form.contractOwner" placeholder="请输入业主单位" />
                        </el-form-item>
-                        <el-form-item label="承包内容">
+                        <el-form-item label="承包内容" v-if="contract_type !== 'income'">
+                            <editor v-model="form.contractedContent" :min-height="192" />
+                        </el-form-item>
+                        <el-form-item label="合同内容" v-else">
                            <editor v-model="form.contractedContent" :min-height="192" />
                        </el-form-item>
                        <el-form-item label="合同金额" prop="amount">
--- a/src/views/ctr/update/index.vue
+++ b/src/views/ctr/update/index.vue
@ -0,0 +1,246 @@
+<template>
+    <div class="container">
+        <el-steps style="max-width: 100%" :active="active" finish-status="success" align-center>
+            <el-step title="选择合同类型" />
+            <el-step title="修改合同内容" />
+            <el-step title="修改收款方式" />
+        </el-steps>
+        <div class="content">
+            <template v-if="active == 1">
+                <h1>修改收入合同</h1>
+                <el-form ref="incomeContractFormRef" :model="form" :rules="incomeContractFormRules" label-width="80px">
+                    <!-- <el-form-item label="项目名称">
+                            <el-input :model-value="project.name" disabled />
+                        </el-form-item> -->
+                    <el-form-item label="合同编号" prop="contractCode">
+                        <el-input v-model="form.contractCode" placeholder="请输入合同编号" />
+                    </el-form-item>
+                    <el-form-item label="合同类型" prop="contractType">
+                        <el-select v-model="form.contractType" placeholder="请选择合同类型">
+                            <el-option v-for="item in income_contract_type" :key="item.value" :label="item.label"
+                                :value="item.value" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="业主单位" prop="contractOwner">
+                        <el-input v-model="form.contractOwner" placeholder="请输入业主单位" disabled />
+                    </el-form-item>
+                    <el-form-item label="承包内容" v-if="contract_type !== 'income'">
+                        <editor v-model="form.contractedContent" :min-height="192" />
+                    </el-form-item>
+                    <el-form-item label="合同内容" v-else>
+                        <editor v-model="form.contractedContent" :min-height="192" />
+                    </el-form-item>
+                    <el-form-item label="合同金额" prop="amount">
+                        <el-input v-model="form.amount" placeholder="请输入合同金额"
+                            oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')" />
+                    </el-form-item>
+                    <el-form-item label="备注" prop="remark">
+                        <el-input v-model="form.remark" placeholder="请输入备注" />
+                    </el-form-item>
+                    <el-form-item label="附件">
+                        <FileUpload :multiple="true" :fileType="['pdf']" :onUploadSuccess="onUploadSuccess"
+                            :ref="fileRef" :defaultFileList="tempFileList" />
+                    </el-form-item>
+                </el-form>
+                <div>
+                    <el-button type="primary" @click="next">下一步</el-button>
+                </div>
+            </template>
+            <template v-else-if="active == 2">
+                <h1>修改收入合同</h1>
+                <el-form :model="form" :rules="payMentRules" label-width="150" ref="payMentRef">
+                    <el-form-item label="支付方式" placeholder="请选择支付方式" prop="payType">
+                        <el-select v-model="form.payType">
+                            <el-option :value="1" label="月结算">月结算</el-option>
+                            <el-option :value="2" label="形象节点">形象节点</el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="预付款比例（%）" prop="advancePayRatio">
+                        <el-input-number v-model="form.advancePayRatio" :max="100" :min="0" />
+                    </el-form-item>
+                    <el-form-item label="尾款比例（%）" prop="balancePayRatio">
+                        <el-input-number v-model="form.balancePayRatio" :max="100" :min="0" />
+                    </el-form-item>
+                    <el-form-item label="质保金比例（%）" prop="assuranceDepositRatio">
+                        <el-input-number v-model="form.assuranceDepositRatio" :max="100" :min="0" />
+                    </el-form-item>
+                    <el-form-item label="付款比例（%）" prop="payRatio">
+                        <el-input-number v-model="payRatioComputed" disabled />
+                    </el-form-item>
+                    <el-form-item>
+                        <div>
+                            <el-button @click="back(false)">上一步</el-button>
+                            <el-button type="success" @click="submitForm">提交</el-button>
+                        </div>
+                    </el-form-item>
+                </el-form>
+            </template>
+        </div>
+    </div>
+</template>
+<script setup>
+import FileUpload from '@/components/FileUpload';
+import { listExpensesContract, getExpensesContract, delExpensesContract, addExpensesContract, updateExpensesContract, getTenderPlan } from '@/api/ctr/expensesContract';
+import { listIncomeContract, getIncomeContract, delIncomeContract, addIncomeContract, updateIncomeContract } from '@/api/ctr/incomeContract';
+import { useUserStore } from '@/store/modules/user';
+const active = ref(1);
+const contract_type = ref("income")
+const form = ref({ payType: 1 })
+const fileList = ref([])
+const tempFileList = ref([])
+const { proxy } = getCurrentInstance();
+const userStore = useUserStore();
+const planList = ref([]);
+const dialogVisible = ref(false);
+const route = useRoute();
+const router = useRouter();
+const { expenses_contract_type, income_contract_type } = toRefs(
+    proxy?.useDict('income_contract_type', 'expenses_contract_type')
+);
+const fileRef = ref(null);
+const incomeContractFormRef = ref(null);
+const expensesContractFormRef = ref(null);
+const payMentRef = ref(null);
+const incomeContractFormRules = {
+    contractCode: [{ required: true, message: '请输入合同编号', trigger: 'blur' }],
+    contractType: [{ required: true, message: '请选择合同类型', trigger: 'change' }],
+    contractOwner: [{ required: true, message: '请输入业主单位', trigger: 'blur' }],
+    amount: [{ required: true, message: '请输入合同金额', trigger: 'blur' }],
+    remark: [{ required: false, message: '请输入备注', trigger: 'blur' }],
+};
+const expensesContractFormRules = {
+    contractCode: [{ required: true, message: '请输入合同编号', trigger: 'blur' }],
+    contractType: [{ required: true, message: '请选择合同类型', trigger: 'change' }],
+
+    contractSupplier: [{ required: true, message: '请输入供应商', trigger: 'blur' }],
+    amount: [{ required: true, message: '请输入合同金额', trigger: 'blur' }],
+    tenderId: [{ required: true, message: '请选择招标计划', trigger: 'blur' }],
+
+    remark: [{ required: false, message: '请输入备注', trigger: 'blur' }],
+};
+const payMentRules = {
+    payType: [{ required: true, message: '请选择支付方式', trigger: 'change' }],
+    advancePayRatio: [{ required: true, message: '请输入预付款比例', trigger: 'blur' }],
+    balancePayRatio: [{ required: true, message: '请输入尾款比例', trigger: 'blur' }],
+    assuranceDepositRatio: [{ required: true, message: '请输入质保金比例', trigger: 'blur' }],
+
+};
+
+const project = computed(() => {
+    return JSON.parse(localStorage.getItem("selectedProject"))
+});
+
+const payRatioComputed = computed({
+    get: () => {
+        const { advancePayRatio = 0, balancePayRatio = 0, assuranceDepositRatio = 0 } = form.value;
+        const total = 100 - (advancePayRatio + balancePayRatio + assuranceDepositRatio);
+        // form.value.payRatio = total;
+        return total;
+    },
+    // 只读
+    set: () => { }
+});
+
+const onUploadSuccess = (data) => {
+    fileList.value = data
+}
+
+const next = async () => {
+    if (contract_type.value === 'income') {
+        await incomeContractFormRef.value.validate((valid) => {
+            if (valid) {
+                active.value++;
+            } else {
+                ElMessage.error('请填写完整的收入合同信息');
+            }
+        });
+    } else if (contract_type.value === 'expenses') {
+        await expensesContractFormRef.value.validate((valid) => {
+            if (valid) {
+                active.value++;
+            } else {
+                ElMessage.error('请填写完整的支出合同信息');
+            }
+        });
+    }
+    console.log(active.value);
+
+    form.value.step = active.value;
+};
+const submitForm = async () => {
+    await payMentRef.value.validate(async (valid) => {
+        if (valid) {
+
+            if (payRatioComputed.value < 0) {
+
+                ElMessage.error('四项付款比例之和必须等于100%');
+                return;
+            }
+            form.value.payRatio = payRatioComputed.value;
+
+            // 提交付款信息逻辑
+            console.log('提交付款信息', form.value, fileList.value);
+            // 这里可以调用API提交数据
+            form.value.projectId = project.value.id;
+            form.value.fileList = fileList.value.map((data) => {
+                return {
+                    ...data,
+                    fileName: data.name,
+                    fileUrl: data.url,
+                }
+            })
+            if (contract_type.value === 'income') {
+                await updateIncomeContract({ ...form.value });
+            }
+            ElMessage.success('合同修改成功');
+        } else {
+            ElMessage.error('请填写完整的付款信息');
+        }
+    });
+
+}
+const handleChoose = async () => {
+    if (!form.value.contractType) {
+        ElMessage.error('请先选择合同类型');
+        return;
+    }
+    const formData = {
+        projectId: userStore.selectedProject.id,
+        dictName: form.value.contractType,
+        status: 1,
+    }
+    const { data } = await getTenderPlan(formData)
+    if (data.length === 0) {
+        ElMessage.warning('当前没有招标计划，请先创建招标计划');
+        return;
+    }
+    planList.value = data
+    dialogVisible.value = true;
+
+}
+
+onMounted(async () => {
+    const id = route.query.id;
+    if (id) {
+        const { data } = await getIncomeContract(id);
+        form.value.id = data.id;
+        form.value.contractOwner = data.contractOwner
+    } else {
+        router.push('/ctr/incomeContract');
+    }
+})
+</script>
+<style scoped lang="scss">
+.container {
+    padding: 20px;
+
+    .content {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 30px;
+        flex-direction: column;
+    }
+}
+</style>