优化

MrShi

2024-11-06 08aec42c4da1cecf123edfb250d3181fb5e659cc

优化

 company/.env.development

@@ -11,4 +11,4 @@
# VUE_APP_API = 'https://dmtest.ahapp.net/yyb_admin_api/'

# ä»»åº·
VUE_APP_API = 'http://192.168.0.138:10030/'
VUE_APP_API = 'http://192.168.0.134:10030/'

 company/src/api/business/contract.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,38 @@
import request from '../../utils/request'

// æŸ¥è¯¢
export function fetchList (data) {
  return request.post('/business/contract/page', data, {
    trim: true
  })
}

// åˆ›å»º
export function create (data) {
  return request.post('/business/contract/create', data)
}

// åˆ é™¤
export function deleteById (id) {
  return request.get(`/business/contract/delete/${id}`)
}

// æ ¹æ®id查询
export function contractId (id) {
  return request.get(`/business/contract/${id}`)
}

// ä¿®æ”¹
export function updateById (data) {
  return request.post('/business/contract/updateById', data)
}

// åˆåŒå–消
export function cancel (data) {
  return request.post('/business/contract/cancel', data)
}

// å‘起签署
export function getSignLink (id) {
  return request.get(`/business/contract/getSignLink?id=${id}`)
}

 company/src/components/business/OperaContractDescWindow.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,167 @@
<template>
    <GlobalWindow
        :title="title"
        width="100%"
        :withFooter="false"
        :visible.sync="visible"
        :confirm-working="isWorking"
        @confirm="confirm"
    >
        <div class="info" v-if="info">
            <div class="info_label">
                <span>合同详情</span>
            </div>
            <div class="info_list">
                <div class="info_list_item">
                    <div class="info_list_item_label">合同名称：</div>
                    <div class="info_list_item_val">{{info.name}}</div>
                </div>
                <div class="info_list_item">
                    <div class="info_list_item_label">合同时间：</div>
                    <div class="info_list_item_val">{{info.startTime}} - {{info.endTime}}</div>
                </div>
                <div class="info_list_item">
                    <div class="info_list_item_label">合同类型：</div>
                    <div class="info_list_item_val">
                        <template v-if="info.signType === 0">平台-商户</template>
                        <template v-if="info.signType === 1">平台-企业</template>
                        <template v-if="info.signType === 2">商户-企业</template>
                    </div>
                </div>
                <div class="info_list_item">
                    <div class="info_list_item_label">企业名称：</div>
                    <div class="info_list_item_val">{{info.companyName}}</div>
                </div>
                <div class="info_list_item" style="width: 100%;">
                    <div class="info_list_item_label">签署方式：</div>
                    <div class="info_list_item_val">
                        <template v-if="info.type === 0">双方签章</template>
                        <template v-if="info.type === 1">仅我方签章</template>
                    </div>
                </div>
                <div class="info_list_item" style="width: 100%;">
                    <div class="info_list_item_label">原始附件：</div>
                    <div class="info_list_item_val">
                        <u @click="openPDF(info.multifile.fileurlFull)">{{info.multifile.name}}</u>
                    </div>
                </div>
                <div class="info_list_item" style="width: 100%;">
                    <div class="info_list_item_label">备注：</div>
                    <div class="info_list_item_val">{{info.remark}}</div>
                </div>
            </div>
        </div>
        <div class="info" v-if="info && info.status !== 0">
            <div class="info_label">
                <span>合同签署情况</span>
            </div>
            <div class="info_list">
                <div class="info_list_item">
                    <div class="info_list_item_label">平台签署人：</div>
                    <div class="info_list_item_val">张三</div>
                </div>
                <div class="info_list_item">
                    <div class="info_list_item_label">平台签署时间：</div>
                    <div class="info_list_item_val">2024-08-28 08:53:52</div>
                </div>
                <div class="info_list_item">
                    <div class="info_list_item_label">合同类型：</div>
                    <div class="info_list_item_val">商户-企业</div>
                </div>
                <div class="info_list_item">
                    <div class="info_list_item_label">企业名称：</div>
                    <div class="info_list_item_val">XXX有限公司</div>
                </div>
                <div class="info_list_item">
                    <div class="info_list_item_label">企业签署人：</div>
                    <div class="info_list_item_val">里斯</div>
                </div>
                <div class="info_list_item">
                    <div class="info_list_item_label">企业签署时间：</div>
                    <div class="info_list_item_val">2024-08-30 08:53:52</div>
                </div>
                <div class="info_list_item">
                    <div class="info_list_item_label">签署件：</div>
                    <div class="info_list_item_val">
                        <u>XXX合同签署件.pdf</u>
                    </div>
                </div>
            </div>
        </div>
    </GlobalWindow>
</template>

<script>
  import BaseOpera from '@/components/base/BaseOpera'
  import GlobalWindow from '@/components/common/GlobalWindow'
  import { contractId } from '@/api/business/contract'
  export default {
    name: 'OperaContractDescWindow',
    extends: BaseOpera,
    components: { GlobalWindow },
    data () {
      return {
        info: null
      }
    },
    methods: {
      open (title, id) {
        this.title = title
        this.visible = true
        contractId(id)
          .then(res => {
            console.log(res)
            this.info = res
          })
      },
      openPDF(url) {
        window.open(url)
      }
    }
  }
</script>

<style lang="scss" scoped>
    .info {
        width: 100%;
        .info_label {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            span {
                font-size: 18px;
                font-weight: 600;
                color: #000000;
            }
        }
        .info_list {
            width: 100%;
            display: flex;
            align-items: start;
            flex-wrap: wrap;
            .info_list_item {
                width: 50%;
                display: flex;
                align-items: start;
                margin-bottom: 20px;
                .info_list_item_label {
                    flex-shrink: 0;
                    font-size: 16px;
                }
                .info_list_item_val {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    font-size: 16px;
                    u {
                        font-size: 16px;
                        color: #2E68EC;
                        cursor: pointer;
                    }
                }
            }
        }
    }
</style>

 company/src/components/business/OperaContractWindow.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,185 @@
<template>
    <GlobalWindow
        :title="title"
        :visible.sync="visible"
        :confirm-working="isWorking"
        @confirm="confirm"
    >
        <el-form :model="form" ref="form" :rules="rules">
            <el-form-item label="合同名称" prop="name">
                <el-input v-model="form.name" maxlength="50" show-word-limit placeholder="请输入合同名称" v-trim/>
            </el-form-item>
            <el-form-item label="合同对象" prop="companyType">
                <el-radio-group v-model="form.companyType" @change="getList">
                    <el-radio :label="0">企业</el-radio>
                    <el-radio :label="1">商户</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="企业/商户名称" prop="companyId">
                <el-select v-model="form.companyId" filterable placeholder="请选择，支持搜索">
                    <el-option
                        v-for="item in nameList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="合同时间" prop="date">
                <el-date-picker
                    v-model="form.date"
                    type="daterange"
                    @change="changeDate"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="签章方式" prop="type">
                <el-radio-group v-model="form.type">
                    <el-radio :label="0">双方签章</el-radio>
                    <el-radio :label="1">仅我方签章</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="合同附件" prop="multifile" :rules="[{required:true,message:'请上传方案确认书'}]">
                <div>
                    <UploadFile @remove="deleFile" :uploadData="{ folder: 'contract', fileType:'.pdf' }" :fileList="fileList" @uploadSuccess="editFanganFile" />
                </div>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input
                    type="textarea"
                    placeholder="请输入备注"
                    v-model="form.remark"
                    maxlength="300"
                    show-word-limit
                    v-trim
                />
            </el-form-item>
        </el-form>
    </GlobalWindow>
</template>

<script>
  import BaseOpera from '@/components/base/BaseOpera'
  import GlobalWindow from '@/components/common/GlobalWindow'
  import UploadFile from '@/components/common/UploadFile'
  import { pageAll } from '@/api/business/company'
  import { mapState } from 'vuex'
  export default {
    name: 'OperaContractWindow',
    extends: BaseOpera,
    computed: {
      ...mapState(['userInfo'])
    },
    components: { GlobalWindow, UploadFile },
    data () {
      const validatorTime = (rule, value, callback) => {
        if (!this.form.startTime || !this.form.endTime) {
          return callback(new Error('请选择合同时间'))
        }
        callback()
      }
      const validatorMultifile = (rule, value, callback) => {
        if (!this.form.multifile) {
          return callback(new Error('请上传合同附件'))
        }
        callback()
      }
      return {
        // è¡¨å•æ•°æ®
        form: {
          id: null,
          remark: '',
          name: '',
          companyType: 0,
          type: 0,
          startTime: '',
          endTime: '',
          date: [],
          multifile: null,
          companyId: ''
        },
        fileList: [],
        // éªŒè¯è§„则
        rules: {
          name: [
            { required: true, message: '请输入合同名称' }
          ],
          companyType: [
            { required: true, message: '请选择合同对象' }
          ],
          companyId: [
            { required: true, message: '请选择企业/商户名称' }
          ],
          date: [
            { required: true, validator: validatorTime }
          ],
          multifile: [
            { required: true, validator: validatorMultifile }
          ],
        },
        nameList: [],
        list: []
      }
    },
    created () {
      this.config({
        api: '/business/contract',
        'field.id': 'id'
      })
    },
    methods: {
      open (title, target) {
        this.title = title
        this.visible = true
        if (this.userInfo.type === 0) {
          this.list = [{ label: '企业', id: 0 },{ label: '商户', id: 1 }]
        } else if (this.userInfo.type === 2) {
          this.list = [{ label: '企业', id: 0 }]
        }
        // æ–°å»º
        if (target == null) {
          this.$nextTick(() => {
            this.$refs.form.resetFields()
            this.form[this.configData['field.id']] = null
          })
          this.getList()
          return
        }
        // ç¼–辑
        this.$nextTick(() => {
          for (const key in this.form) {
            this.form[key] = target[key]
          }
        })
        this.getList()
      },
      getList() {
        this.form.companyId = ''
        pageAll({ type: this.form.companyType })
            .then(res => {
              console.log(res)
              this.nameList = res
            })
      },
      deleFile () {
        this.form.multifile = null
      },
      editFanganFile (data) {
        console.log(data)
        this.form.multifile = data
      },
      changeDate(e) {
        if (e) {
          this.form.startTime = e[0]
          this.form.endTime = e[1]
        } else {
          this.form.startTime = ''
          this.form.endTime = ''
        }
      }
    }
  }
</script>

 company/src/components/business/OperaSolutionsBaseWindow.vue

@@ -25,7 +25,7 @@
            </el-form-item>
            <el-form-item label="投保年龄" prop="minAge">
                <div style="display: flex; align-items: center;">
                    <el-select v-model="form.minAge" style="flex: 1;" placeholder="请选择">
                    <el-select v-model="form.minAge" @change="changeMinAge" style="flex: 1;" placeholder="请选择">
                        <el-option
                            v-for="item in 80"
                            :key="item"
@@ -34,7 +34,7 @@
                        </el-option>
                    </el-select>
                    <span style="margin: 0 30px;">至</span>
                    <el-select v-model="form.maxAge" style="flex: 1;" placeholder="请选择">
                    <el-select v-model="form.maxAge" @change="changeMaxAge" style="flex: 1;" placeholder="请选择">
                        <el-option
                            v-for="item in 80"
                            :key="item"
@@ -242,7 +242,18 @@
      getWangedditor2(val){
        this.form.ortherInfo = val;
      },

      changeMinAge(e) {
        if (this.form.maxAge && this.form.maxAge >= 0 && e > this.form.maxAge) {
          this.form.minAge = ''
          this.$message.warning('起始年龄不能大于截止年龄！')
        }
      },
      changeMaxAge(e) {
        if (this.form.minAge && this.form.minAge >= 0 && e < this.form.minAge) {
          this.form.maxAge = ''
          this.$message.warning('截止年龄不能大于起始年龄！')
        }
      },
      handNumberInput (value) {
        const regex = /^[-+]?\d*$/
        if (!regex.test(value)) {

 company/src/views/business/contract.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,151 @@
<template>
    <TableLayout :permissions="['business:contract:query']">
        <!-- æœç´¢è¡¨å• -->
        <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" inline>
            <el-form-item label="合同名称" prop="name">
                <el-input v-model="searchForm.name" placeholder="请输入合同名称" @keypress.enter.native="search"></el-input>
            </el-form-item>
            <el-form-item label="合同类型" prop="signType">
                <el-select v-model="searchForm.signType" placeholder="请选择" @change="search">
                    <el-option label="平台-商户" :value="0"></el-option>
                    <el-option label="平台-企业" :value="1"></el-option>
                    <el-option label="商户-企业" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select v-model="searchForm.status" placeholder="请选择" @change="search">
                    <el-option label="待签章" :value="0"></el-option>
                    <el-option label="我方已签章" :value="1"></el-option>
                    <el-option label="企业商户已签章" :value="2"></el-option>
                    <el-option label="完成" :value="3"></el-option>
                    <el-option label="已取消" :value="4"></el-option>
                    <el-option label="已关闭" :value="5"></el-option>
                </el-select>
            </el-form-item>
            <section>
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button @click="reset">重置</el-button>
            </section>
        </el-form>
        <!-- è¡¨æ ¼å’Œåˆ†é¡µ -->
        <template v-slot:table-wrap>
            <ul class="toolbar" v-permissions="['business:contract:create']">
                <li><el-button type="primary" @click="$refs.operaContractWindow.open('新建合同信息表')" icon="el-icon-plus" v-permissions="['business:contract:create']">新建</el-button></li>
            </ul>
            <el-table
                v-loading="isWorking.search"
                :data="tableData.list"
                stripe
            >
                <el-table-column label="序号" width="80px">
                    <template slot-scope="scope">
                        <span>{{scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="合同名称" min-width="100px"></el-table-column>
                <el-table-column label="合同类型" min-width="100px">
                    <template slot-scope="{row}">
                        <template v-if="row.signType === 0">平台-商户</template>
                        <template v-else-if="row.signType === 1">平台-企业</template>
                        <template v-else-if="row.signType === 2">商户-企业</template>
                    </template>
                </el-table-column>
                <el-table-column prop="companyName" label="对方名称" min-width="100px"></el-table-column>
                <el-table-column label="合同开始时间" min-width="100px">
                    <template slot-scope="{row}">
                        {{ row.startTime }} - {{ row.endTime }}
                    </template>
                </el-table-column>
                <el-table-column label="状态" min-width="100px">
                    <template slot-scope="{row}">
                        <template v-if="row.status === 0">待签章</template>
                        <template v-else-if="row.status === 1">我方已签章</template>
                        <template v-else-if="row.status === 2">企业商户已签章</template>
                        <template v-else-if="row.status === 3">完成</template>
                        <template v-else-if="row.status === 4">已取消</template>
                        <template v-else-if="row.status === 5">已关闭</template>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="containPermissions(['business:contract:update', 'business:contract:delete'])"
                    label="操作"
                    min-width="220"
                    fixed="right"
                >
                    <template slot-scope="{row}">
                        <el-button type="text" @click="$refs.operaContractDescWindow.open('合同详情', row.id)" icon="el-icon-view">查看详情</el-button>
                        <el-button type="text" @click="sign(row)" icon="el-icon-document-checked" v-if="row.status !== 1 && row.status !== 4 && row.status !== 3">签署</el-button>
                        <el-button type="text" icon="el-icon-document-remove" v-if="row.status === 0" @click="cancelHT(row.id)">取消</el-button>
                        <el-button type="text" @click="deleteById(row)" icon="el-icon-delete" v-permissions="['business:contract:delete']" v-if="row.status === 4">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
                :pagination="tableData.pagination"
            >
            </pagination>
        </template>
        <!-- æ–°å»º/修改 -->
        <OperaContractWindow ref="operaContractWindow" @success="handlePageChange"/>
        <!--    è¯¦æƒ…    -->
        <OperaContractDescWindow ref="operaContractDescWindow" />
    </TableLayout>
</template>

<script>
  import BaseTable from '@/components/base/BaseTable'
  import TableLayout from '@/layouts/TableLayout'
  import Pagination from '@/components/common/Pagination'
  import OperaContractWindow from '@/components/business/OperaContractWindow'
  import OperaContractDescWindow from '@/components/business/OperaContractDescWindow'
  import { cancel, getSignLink } from '@/api/business/contract'
  export default {
    name: 'Contract',
    extends: BaseTable,
    components: { TableLayout, Pagination, OperaContractWindow, OperaContractDescWindow },
    data () {
      return {
        // æœç´¢
        searchForm: {
          name: '',
          signType: '',
          status: ''
        }
      }
    },
    created () {
      this.config({
        module: '合同信息表',
        api: '/business/contract',
        'field.id': 'id',
        'field.main': 'id'
      })
      this.search()
    },
    methods: {
      // ç­¾ç½²
      sign(row) {
        getSignLink(row.id)
          .then(res => {
            window.open(res)
          })
      },
      // å–消合同
      cancelHT(id) {
        this.$confirm('确认取消当前合同吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          cancel({ id }).then(res => {
            this.search()
          })
        }).catch(() => {

        });
      }
    }
  }
</script>