恢复文件

src/views/contract/paymentPlan.vue

@@ -1,200 +1,182 @@
 <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>
+            <span style="padding: 0 6px;word-break: keep-all;">
-            <el-input v-model="searchForm.name" placeholder="请输入表格名称" style="width: 180px" />
+              付款计划日期
+            </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>
+            <span style="padding: 0 6px;word-break: keep-all;">
-            <el-select v-model="searchForm.status" placeholder="所有状态" style="width: 180px">
+              关键字
-              <el-option label="所有状态" value=""></el-option>
+            </span>
-              <el-option label="草稿" value="draft"></el-option>
+            <Input v-model="select.keyword" placeholder="请输入关键字" style="width: 180px"></Input>
-              <el-option label="已发布" value="published"></el-option>
-              <el-option label="已禁用" value="disabled"></el-option>
-            </el-select>
           </div>
 
-          <div>
+          <Button style="margin-left: 10px" type="primary"
-            <span style="padding: 0 6px;word-break: keep-all;">类型</span>
+            @click="select={showDate:'',start:'',end:'',pageIndex:1,keyword:''}">重置
-            <el-select v-model="searchForm.type" placeholder="所有类型" style="width: 180px">
+          </Button>
-              <el-option label="所有类型" value=""></el-option>
+          <Button style="margin-left: 10px" type="primary" @click="getSignPlan">查询</Button>
-              <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>
         </div>
       </slot>
     </lx-header>
 
-    <!-- 表格区域 -->
+
-    <xy-table :list="tableData" :table-item="tableColumns">
+    <xy-table :list="list" :table-item="table" @delete="deleteContractSign"
-      <template #operation="{ row }">
+      @editor="(row)=>{$refs['detailContractSign'].planId = row.id;$refs['detailContractSign'].isShow = true}">
-        <el-button size="small" @click="handleEdit(row)">编辑</el-button>
+      <template v-slot:btns v-if="type==0">
-        <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>
       </template>
     </xy-table>
 
-    <!-- 分页 -->
     <div style="display: flex;justify-content: flex-end;">
-      <el-pagination
+      <Page :total="total" @on-change="pageChange" show-elevator show-sizer @on-page-size-change="pageSizeChange" />
-        background
-        layout="total, sizes, prev, pager, next"
-        :total="total"
-        :current-page="currentPage"
-        :page-size="pageSize"
-        @current-change="handlePageChange"
-        @size-change="handleSizeChange"
-      />
     </div>
+
+    <detailContractSign ref="detailContractSign" @editorSuccess="getSignPlan"></detailContractSign>
   </div>
 </template>
 
 <script>
+  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 {
-  name: 'PayFormConfig',
+    components: {
+      detailContractSign
+    },
     data() {
       return {
-      searchForm: {
+        select: {
-        name: '',
+          start: `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`,
-        status: '',
+          end: `${new Date().getFullYear()}-${new Date().getMonth() + 2}-${new Date().getDate()}`,
-        type: ''
+          pageIndex: 1,
+          keyword: '',
+          is_auth: 1,
+        },
+        total: 0,
+        list: [],
+        table: [{
+            prop: 'contract.name',
+            label: '项目名称',
+            width: 170,
+            align: 'left',
+            fixed: 'left'
           },
-      tableData: [
           {
-          name: '项目采购支付表格',
+            prop: 'money',
-          type: 'HTML',
+            label: '计划付款金额（元）',
-          status: 'published',
+            align: 'right',
-          scenes: '项目采购、设备采购',
+            width: 170,
-          createTime: '2024-03-01 10:00',
+            formatter: (v1, v2, value) => {
-          updateTime: '2024-03-05 15:30'
+              return Number(value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
+            }
           },
           {
-          name: '差旅报销表格',
+            prop: 'date',
-          type: 'DOCX',
+            label: '计划付款日期',
-          status: 'draft',
+            width: 180
-          scenes: '差旅报销、交通费报销',
-          createTime: '2024-03-02 14:20',
-          updateTime: '2024-03-02 14:20'
           },
           {
-          name: '会议费用报销表格',
+            prop: 'content',
-          type: 'DOCX',
+            label: '内容',
-          status: 'disabled',
+            minWidth: 180,
-          scenes: '会议费用、培训费用',
-          createTime: '2024-02-28 09:15',
-          updateTime: '2024-03-03 11:45'
-        }
-      ],
-      tableColumns: [
-        {
-          prop: 'name',
-          label: '表格名称',
-          width: 170,
             align: 'left'
           },
           {
-          prop: 'type',
+            prop: 'contract.created_at',
-          label: '类型',
+            label: '合同签订日期',
-          width: 100
+            width: 180,
-        },
+            formatter: (v1, v2, value) => {
-        {
+              return parseTime(new Date(value), '{y}-{m}-{d}')
-          prop: 'status',
+            }
-          label: '状态',
-          width: 100,
-          formatter: (row) => this.getStatusText(row.status)
           },
           {
-          prop: 'scenes',
+            prop: 'contract.supply',
-          label: '已使用场景',
+            label: '受款单位',
-          minWidth: 180,
+            width: 140
-          align: 'left'
           },
           {
-          prop: 'createTime',
+            prop: 'admin.name',
-          label: '创建时间',
+            label: '经办人',
-          width: 160
+            width: 140
           },
           {
-          prop: 'updateTime',
+            prop: 'department.name',
-          label: '更新时间',
+            label: '经办科室',
-          width: 160
+            width: 140
           },
           {
-          prop: 'operation',
+            prop: 'created_at',
-          label: '操作',
+            label: '创建信息',
-          width: 250,
+            width: 160,
-          slot: true
+            formatter: (v1, v2, value) => {
+              return parseTime(new Date(value), '{y}-{m}-{d}')
+            }
           }
         ],
-      total: 30,
-      currentPage: 1,
-      pageSize: 10
       }
     },
     methods: {
-    handleCreate() {
+      pageSizeChange(e) {
-      this.$router.push('/payment-form-config/create')
+        this.select.pageSize = e;
-    },
+        this.select.pageIndex = 1;
-    handleSearch() {
+        this.getSignPlan();
-      console.log('Search with:', this.searchForm)
+      },
+      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: "操作成功"
+          })
+        })
       },
-    resetSearch() {
+      datePick(e) {
-      this.searchForm = {
+        this.select.start = e[0]
-        name: '',
+        this.select.end = e[1]
-        status: '',
-        type: ''
-      }
       },
-    handleEdit(row) {
+      pageChange(e) {
-      this.$router.push(`/payment-form-config/edit/${row.id}`)
+        this.select.pageIndex = e
-    },
+        this.getSignPlan()
-    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
     },
-    handleSizeChange(size) {
+    mounted() {
-      this.pageSize = size
+      this.getSignPlan()
-      this.currentPage = 1
     },
-    getStatusText(status) {
+    created() {
-      const texts = {
+      let type = parseInt(this.$route.path.split("_")[1]);
-        published: '已发布',
+      this.type = this.select.is_auth = type;
-        draft: '草稿',
-        disabled: '已禁用'
-      }
-      return texts[status] || status
-    }
     }
   }
 </script>
@@ -203,20 +185,9 @@ export default {
   .selects {
     display: flex;
     flex-wrap: wrap;
-  align-items: center;
 
     &>div {
       margin-bottom: 6px;
-    display: flex;
-    align-items: center;
     }
   }
-
-:deep(.el-button + .el-button) {
-  margin-left: 8px;
-}
-
-:deep(.el-table) {
-  margin-top: 20px;
-}
 </style>