From 04cabf4a016ee4a08dbbf5d80b86bc6fe92d57d8 Mon Sep 17 00:00:00 2001
From: lynn <lynnlinyong@qq.com>
Date: Tue, 22 Apr 2025 09:46:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=81=A2=E5=A4=8D=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/contract/paymentPlan.vue | 341 +++++++++++++----------------
 1 file changed, 156 insertions(+), 185 deletions(-)

diff --git a/src/views/contract/paymentPlan.vue b/src/views/contract/paymentPlan.vue
index 78bfc79..fa5d8bf 100644
--- a/src/views/contract/paymentPlan.vue
+++ b/src/views/contract/paymentPlan.vue
@@ -1,222 +1,193 @@
 <template>
   <div style="padding: 0 20px;">
-    <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="支付表格列表">
+    <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="付款计划">
       <div slot="content"></div>
       <slot>
-        <!-- 搜索区域 -->
         <div class="selects">
           <div>
-            <span style="padding: 0 6px;word-break: keep-all;">表格名称</span>
-            <el-input v-model="searchForm.name" placeholder="请输入表格名称" style="width: 180px" />
+            <span style="padding: 0 6px;word-break: keep-all;">
+              付款计划日期
+            </span>
+            <DatePicker :value="[select.start,select.end]" placeholder="请选择日期" placement="bottom-start"
+              style="width: 200px" type="daterange" @on-change="datePick"></DatePicker>
           </div>
 
           <div>
-            <span style="padding: 0 6px;word-break: keep-all;">状态</span>
-            <el-select v-model="searchForm.status" placeholder="所有状态" style="width: 180px">
-              <el-option label="所有状态" value=""></el-option>
-              <el-option label="草稿" value="draft"></el-option>
-              <el-option label="已发布" value="published"></el-option>
-              <el-option label="已禁用" value="disabled"></el-option>
-            </el-select>
+            <span style="padding: 0 6px;word-break: keep-all;">
+              关键字
+            </span>
+            <Input v-model="select.keyword" placeholder="请输入关键字" style="width: 180px"></Input>
           </div>
 
-          <div>
-            <span style="padding: 0 6px;word-break: keep-all;">类型</span>
-            <el-select v-model="searchForm.type" placeholder="所有类型" style="width: 180px">
-              <el-option label="所有类型" value=""></el-option>
-              <el-option label="HTML" value="html"></el-option>
-              <el-option label="DOCX" value="docx"></el-option>
-            </el-select>
-          </div>
-
-          <el-button style="margin-left: 10px" @click="resetSearch">重置</el-button>
-          <el-button style="margin-left: 10px" type="primary" @click="handleSearch">查询</el-button>
-          <el-button style="margin-left: 10px" type="primary" @click="handleCreate">新建支付表格</el-button>
+          <Button style="margin-left: 10px" type="primary"
+            @click="select={showDate:'',start:'',end:'',pageIndex:1,keyword:''}">重置
+          </Button>
+          <Button style="margin-left: 10px" type="primary" @click="getSignPlan">查询</Button>
         </div>
       </slot>
     </lx-header>
 
-    <!-- 表格区域 -->
-    <xy-table :list="tableData" :table-item="tableColumns">
-      <template #operation="{ row }">
-        <el-button size="small" @click="handleEdit(row)">编辑</el-button>
-        <el-button size="small" @click="handlePreview(row)">预览</el-button>
-        <el-button 
-          size="small" 
-          :type="row.status === 'disabled' ? 'success' : 'danger'"
-          @click="handleStatusChange(row)"
-        >
-          {{ row.status === 'disabled' ? '启用' : '禁用' }}
-        </el-button>
+
+    <xy-table :list="list" :table-item="table" @delete="deleteContractSign"
+      @editor="(row)=>{$refs['detailContractSign'].planId = row.id;$refs['detailContractSign'].isShow = true}">
+      <template v-slot:btns v-if="type==0">
+
       </template>
     </xy-table>
 
-    <!-- 分页 -->
     <div style="display: flex;justify-content: flex-end;">
-      <el-pagination
-        background
-        layout="total, sizes, prev, pager, next"
-        :total="total"
-        :current-page="currentPage"
-        :page-size="pageSize"
-        @current-change="handlePageChange"
-        @size-change="handleSizeChange"
-      />
+      <Page :total="total" @on-change="pageChange" show-elevator show-sizer @on-page-size-change="pageSizeChange" />
     </div>
+
+    <detailContractSign ref="detailContractSign" @editorSuccess="getSignPlan"></detailContractSign>
   </div>
 </template>
 
 <script>
-export default {
-  name: 'PayFormConfig',
-  data() {
-    return {
-      searchForm: {
-        name: '',
-        status: '',
-        type: ''
-      },
-      tableData: [
-        {
-          name: '项目采购支付表格',
-          type: 'HTML',
-          status: 'published',
-          scenes: '项目采购、设备采购',
-          createTime: '2024-03-01 10:00',
-          updateTime: '2024-03-05 15:30'
-        },
-        {
-          name: '差旅报销表格',
-          type: 'DOCX',
-          status: 'draft',
-          scenes: '差旅报销、交通费报销',
-          createTime: '2024-03-02 14:20',
-          updateTime: '2024-03-02 14:20'
-        },
-        {
-          name: '会议费用报销表格',
-          type: 'DOCX',
-          status: 'disabled',
-          scenes: '会议费用、培训费用',
-          createTime: '2024-02-28 09:15',
-          updateTime: '2024-03-03 11:45'
-        }
-      ],
-      tableColumns: [
-        {
-          prop: 'name',
-          label: '表格名称',
-          width: 170,
-          align: 'left'
-        },
-        {
-          prop: 'type',
-          label: '类型',
-          width: 100
-        },
-        {
-          prop: 'status',
-          label: '状态',
-          width: 100,
-          formatter: (row) => this.getStatusText(row.status)
-        },
-        {
-          prop: 'scenes',
-          label: '已使用场景',
-          minWidth: 180,
-          align: 'left'
-        },
-        {
-          prop: 'createTime',
-          label: '创建时间',
-          width: 160
-        },
-        {
-          prop: 'updateTime',
-          label: '更新时间',
-          width: 160
-        },
-        {
-          prop: 'operation',
-          label: '操作',
-          width: 250,
-          slot: true
-        }
-      ],
-      total: 30,
-      currentPage: 1,
-      pageSize: 10
-    }
-  },
-  methods: {
-    handleCreate() {
-      this.$router.push('/payment-form-config/create')
-    },
-    handleSearch() {
-      console.log('Search with:', this.searchForm)
+  import {
+    getContractSign,
+    delContractSign
+  } from "@/api/contractSign/contractSign"
+  import {
+    parseTime
+  } from "@/utils"
+  import {
+    Message
+  } from "element-ui";
+
+  import detailContractSign from "@/views/contract/components/detailContractSign";
+
+  export default {
+    components: {
+      detailContractSign
     },
-    resetSearch() {
-      this.searchForm = {
-        name: '',
-        status: '',
-        type: ''
+    data() {
+      return {
+        select: {
+          start: `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`,
+          end: `${new Date().getFullYear()}-${new Date().getMonth() + 2}-${new Date().getDate()}`,
+          pageIndex: 1,
+          keyword: '',
+          is_auth: 1,
+        },
+        total: 0,
+        list: [],
+        table: [{
+            prop: 'contract.name',
+            label: '项目名称',
+            width: 170,
+            align: 'left',
+            fixed: 'left'
+          },
+          {
+            prop: 'money',
+            label: '计划付款金额（元）',
+            align: 'right',
+            width: 170,
+            formatter: (v1, v2, value) => {
+              return Number(value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
+            }
+          },
+          {
+            prop: 'date',
+            label: '计划付款日期',
+            width: 180
+          },
+          {
+            prop: 'content',
+            label: '内容',
+            minWidth: 180,
+            align: 'left'
+          },
+          {
+            prop: 'contract.created_at',
+            label: '合同签订日期',
+            width: 180,
+            formatter: (v1, v2, value) => {
+              return parseTime(new Date(value), '{y}-{m}-{d}')
+            }
+          },
+          {
+            prop: 'contract.supply',
+            label: '受款单位',
+            width: 140
+          },
+          {
+            prop: 'admin.name',
+            label: '经办人',
+            width: 140
+          },
+          {
+            prop: 'department.name',
+            label: '经办科室',
+            width: 140
+          },
+          {
+            prop: 'created_at',
+            label: '创建信息',
+            width: 160,
+            formatter: (v1, v2, value) => {
+              return parseTime(new Date(value), '{y}-{m}-{d}')
+            }
+          }
+        ],
       }
     },
-    handleEdit(row) {
-      this.$router.push(`/payment-form-config/edit/${row.id}`)
-    },
-    handlePreview(row) {
-      this.$message.info(`预览：${row.name}`)
-    },
-    handleStatusChange(row) {
-      const action = row.status === 'disabled' ? '启用' : '禁用'
-      this.$confirm(`确定要${action}该表格吗？`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.$message.success(`${action}成功`)
-      }).catch(() => {
-        this.$message.info('已取消操作')
-      })
-    },
-    handlePageChange(page) {
-      this.currentPage = page
+    methods: {
+      pageSizeChange(e) {
+        this.select.pageSize = e;
+        this.select.pageIndex = 1;
+        this.getSignPlan();
+      },
+      async getSignPlan() {
+        const res = await getContractSign({
+          page_size: this.select.pageSize,
+          page: this.select.pageIndex,
+          keyword: this.select.keyword,
+          start_date: this.select.start,
+          end_date: this.select.end,
+          is_auth: this.select.is_auth
+        })
+        this.total = res.total
+        this.list = res.data
+      },
+      deleteContractSign(row) {
+        delContractSign({
+          id: row.id
+        }).then(res => {
+          this.getSignPlan()
+          Message({
+            type: 'success',
+            message: "操作成功"
+          })
+        })
+      },
+      datePick(e) {
+        this.select.start = e[0]
+        this.select.end = e[1]
+      },
+      pageChange(e) {
+        this.select.pageIndex = e
+        this.getSignPlan()
+      },
     },
-    handleSizeChange(size) {
-      this.pageSize = size
-      this.currentPage = 1
+    mounted() {
+      this.getSignPlan()
     },
-    getStatusText(status) {
-      const texts = {
-        published: '已发布',
-        draft: '草稿',
-        disabled: '已禁用'
-      }
-      return texts[status] || status
+    created() {
+      let type = parseInt(this.$route.path.split("_")[1]);
+      this.type = this.select.is_auth = type;
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
-.selects {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-
-  & > div {
-    margin-bottom: 6px;
+  .selects {
     display: flex;
-    align-items: center;
-  }
-}
-
-:deep(.el-button + .el-button) {
-  margin-left: 8px;
-}
+    flex-wrap: wrap;
 
-:deep(.el-table) {
-  margin-top: 20px;
-}
+    &>div {
+      margin-bottom: 6px;
+    }
+  }
 </style>