From a419991b619f505427a0ce1d0a122e9675f8ccce Mon Sep 17 00:00:00 2001
From: weipengfei <2187978347@qq.com>
Date: Sat, 2 Sep 2023 13:15:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=B8=89=E8=BD=AE=E8=BD=A6?=
=?UTF-8?q?=E5=90=88=E5=90=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/api/contract.ts | 18 ++
src/views/contract/vehicle_detail.vue | 364 ++++++++++++++++++++++++++
src/views/contract/vehicle_list.vue | 221 ++++++++++++++++
3 files changed, 603 insertions(+)
create mode 100644 src/views/contract/vehicle_detail.vue
create mode 100644 src/views/contract/vehicle_list.vue
diff --git a/src/api/contract.ts b/src/api/contract.ts
index 043e417..28a01de 100644
--- a/src/api/contract.ts
+++ b/src/api/contract.ts
@@ -23,4 +23,22 @@ export function apiContractDelete(params: any) {
// 合同详情
export function apiContractDetail(params: any) {
return request.get({ url: '/contract.contract/detail', params })
+}
+
+// 三轮车合同列表
+export function leaseContractList(params: any) {
+ return request.get({ url: "/contract.VehicleContract/lists", params });
+}
+
+//租赁详情
+export function leaseContractDetail(params: any) {
+ return request.get({ url: "/contract.VehicleContract/detail", params });
+}
+
+//上传合同
+export function leaseUpContract(params: any) {
+ return request.post({
+ url: "/contract.VehicleContract/uploadContract",
+ params,
+ });
}
\ No newline at end of file
diff --git a/src/views/contract/vehicle_detail.vue b/src/views/contract/vehicle_detail.vue
new file mode 100644
index 0000000..6956cd2
--- /dev/null
+++ b/src/views/contract/vehicle_detail.vue
@@ -0,0 +1,364 @@
+<template>
+ <div class="edit-popup">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ label-width="90px"
+ :rules="formRules"
+ :disabled="true"
+ >
+ <el-col :span="24" class="el-card pt-6">
+ <div class="tit">甲方信息</div>
+ <el-row>
+ <el-col :span="8">
+ <el-form-item label="公司名称" prop="company_name">
+ <el-input
+ v-model="formData.company_a_name"
+ placeholder="请输入公司名称"
+ clearable
+ :disabled="isDisabled"
+ :style="{ width: '100%' }"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="8">
+ <el-form-item label="社会代码" prop="organization_code">
+ <el-input
+ :disabled="isDisabled"
+ v-model="formData.company_a_code"
+ placeholder="请输入社会代码"
+ clearable
+ :style="{ width: '100%' }"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-col>
+ <el-col :span="24" class="el-card pt-6">
+ <div class="tit">主要联系人</div>
+ <el-row>
+ <div style="display: flex; justify-content: left">
+ <div class="right">
+ <el-row>
+ <el-col :span="8">
+ <el-form-item label="姓名" prop="master_name">
+ <el-input
+ :disabled="isDisabled"
+ v-model="formData.company_a_user"
+ placeholder="请输入姓名"
+ clearable
+ :style="{ width: '100%' }"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="8">
+ <el-form-item label="手机" prop="master_phone">
+ <el-input
+ :disabled="isDisabled"
+ v-model="formData.company_a_phone"
+ placeholder="请输入手机"
+ clearable
+ :style="{ width: '100%' }"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="8">
+ <el-form-item label="邮箱">
+ <el-input
+ :disabled="isDisabled"
+ v-model="formData.company_a_email"
+ placeholder="请输入邮箱"
+ clearable
+ :style="{ width: '100%' }"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </div>
+ </div>
+ </el-row>
+ </el-col>
+ <el-col :span="24" class="el-card pt-6">
+ <div class="tit">乙方信息</div>
+ <el-row>
+ <el-col :span="8">
+ <el-form-item label="公司名称" prop="company_name">
+ <el-input
+ v-model="formData.company_b_name"
+ placeholder="请输入公司名称"
+ clearable
+ :disabled="isDisabled"
+ :style="{ width: '100%' }"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="8">
+ <el-form-item label="社会代码" prop="organization_code">
+ <el-input
+ :disabled="isDisabled"
+ v-model="formData.company_b_code"
+ placeholder="请输入社会代码"
+ clearable
+ :style="{ width: '100%' }"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-col>
+ <el-col :span="24" class="el-card pt-6">
+ <div class="tit">主要联系人</div>
+ <el-row>
+ <div style="display: flex; justify-content: left">
+ <div class="right">
+ <el-row>
+ <el-col :span="8">
+ <el-form-item label="姓名" prop="master_name">
+ <el-input
+ :disabled="isDisabled"
+ v-model="formData.company_b_user"
+ placeholder="请输入姓名"
+ clearable
+ :style="{ width: '100%' }"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="8">
+ <el-form-item label="手机" prop="master_phone">
+ <el-input
+ :disabled="isDisabled"
+ v-model="formData.company_b_phone"
+ placeholder="请输入手机"
+ clearable
+ :style="{ width: '100%' }"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="8">
+ <el-form-item label="邮箱">
+ <el-input
+ :disabled="isDisabled"
+ v-model="formData.company_b_email"
+ placeholder="请输入邮箱"
+ clearable
+ :style="{ width: '100%' }"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </div>
+ </div>
+ </el-row>
+ </el-col>
+
+ <el-col :span="24" class="el-card pt-6">
+ <div class="tit">租赁信息</div>
+ <el-row v-for="(item, index) in formData.cars_info">
+ <el-col :span="4">
+ <el-form-item label-width="120px" label="车牌号"
+ ><el-input
+ v-model="item.license"
+ placeholder="请输入车牌号"
+ clearable
+ :style="{ width: '100%' }"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="4">
+ <el-form-item label-width="120px" label="车辆类型">
+ <el-input
+ v-model="formData.type"
+ placeholder="请输入车辆类型"
+ clearable
+ :style="{ width: '100%' }"
+ ></el-input
+ ></el-form-item>
+ </el-col>
+ <el-col :span="6">
+ <el-form-item label-width="120px" label="使用公司"
+ ><el-input
+ v-model="formData.company_b_name"
+ placeholder="请输入使用公司"
+ clearable
+ :style="{ width: '100%' }"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="6">
+ <el-form-item label-width="120px" label="签约时间">
+ <el-input
+ v-model="formData.update_time"
+ placeholder="请输入签约时间"
+ clearable
+ :style="{ width: '100%' }"
+ ></el-input
+ ></el-form-item>
+ </el-col>
+ </el-row>
+ </el-col>
+ </el-form>
+ <el-upload
+ v-if="formData.status == 0"
+ :disabled="isDisabled"
+ v-model:file-list="fileList"
+ :headers="{ Token: userStore.token }"
+ class="upload-demo"
+ action="https://worker-task.lihaink.cn/adminapi/upload/file"
+ multiple
+ :limit="1"
+ :on-success="handleAvatarSuccess_three"
+ >
+ <el-button :disabled="isDisabled" type="primary">上传合同</el-button>
+ </el-upload>
+ </div>
+</template>
+<script setup>
+import { reactive, ref } from "vue";
+import { leaseUpContract, leaseContractDetail } from "@/api/contract";
+import useUserStore from "@/stores/modules/user";
+const userStore = useUserStore();
+const router = useRouter();
+const route = useRoute();
+const formData = reactive({
+ contract_logistic_id: "",
+ contract_no: "",
+ company_a_id: "",
+ company_a_name: "",
+ company_a_code: "",
+ company_a_user: "",
+ company_a_phone: "",
+ company_a_email: "@service.ebaoquan.org",
+ company_b_id: "",
+ company_b_name: "",
+ company_b_user: "",
+ company_b_phone: "",
+ company_b_code: "",
+ company_b_email: "@service.ebaoquan.org",
+ num: "",
+ cars_info: {
+ id: "",
+ license: "",
+ },
+ type: 0,
+ status: 0,
+ file: "",
+ contract_url: "",
+ signing_timer: 0,
+ url: null,
+ create_time: "2023-08-31 14:26:42",
+ update_time: "2023-08-31 14:26:49",
+ reject_message: "",
+});
+// route.query.flag
+// console.log(route.query.id);
+// leaseContractDetail({ id: route.query.id }).then((res) => {
+// console.log(res);
+// });
+leaseContractDetail({ id: route.query.id }).then((res) => {
+ for (let key in formData) {
+ formData[key] = res[key];
+ }
+ if (formData.company_a_id) {
+ formData.cars_info = [formData.cars_info];
+ }
+ formData.type
+ ? (formData.type = "自有车辆合同")
+ : (formData.type = "租赁合同");
+ console.log(formData);
+});
+
+const handleAvatarSuccess_three = (response, uploadFile) => {
+ leaseUpContract({
+ id: route.query.id,
+ file: response.data.uri,
+ }).then((res) => {
+ // console.log(res);
+ formData.status = 1;
+ });
+};
+</script>
+
+<style lang="scss">
+.tit {
+ font-size: 1.2rem;
+ translate: 1vw -1vw;
+}
+
+.avatar-uploader .el-upload {
+ width: 10vw;
+ height: 6.3vw;
+ background-color: #fff;
+ border: 1px dashed var(--el-border-color);
+ border-radius: 6px;
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+ transition: var(--el-transition-duration-fast);
+}
+
+.headimg {
+ margin-left: 18px;
+ margin-bottom: 18px;
+ width: 120px;
+ height: 140px;
+ overflow: hidden;
+ border: 1px dashed var(--el-border-color);
+ border-radius: 6px;
+ flex-shrink: 0;
+}
+
+.avatar-uploader-head .el-upload {
+ width: 120px;
+ height: 140px;
+ background-color: #fff;
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+ transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+ border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+ font-size: 28px;
+ color: #8c939d;
+ width: 178px;
+ height: 178px;
+ text-align: center;
+}
+
+.el-icon.avatar-uploader-icon {
+ font-size: 28px;
+ color: #8c939d;
+ width: 178px;
+ height: 178px;
+ text-align: center;
+}
+
+.otherimg {
+ img {
+ width: 10vw;
+ height: 6.3vw;
+ border-radius: 5px;
+ margin-left: 12px;
+ margin-bottom: 12px;
+ }
+}
+
+.el-card {
+ margin-bottom: 10px;
+ background-color: #fff;
+}
+
+.tit {
+ margin-top: 15px;
+}
+
+.others {
+ width: 100% !important;
+}
+</style>
diff --git a/src/views/contract/vehicle_list.vue b/src/views/contract/vehicle_list.vue
new file mode 100644
index 0000000..8d91c71
--- /dev/null
+++ b/src/views/contract/vehicle_list.vue
@@ -0,0 +1,221 @@
+<template>
+ <div>
+ <el-card class="!border-none" v-loading="pager.loading" shadow="never">
+ <el-form class="mb-[-16px]" inline>
+ <el-form-item label="公司名称" prop="company_name">
+ <el-input
+ class="w-[280px]"
+ v-model="queryParams.company_name"
+ clearable
+ placeholder="请输入公司名称"
+ />
+ </el-form-item>
+ <el-form-item label="合同编号" prop="contract_no">
+ <el-input
+ class="w-[280px]"
+ v-model="queryParams.contract_no"
+ clearable
+ placeholder="请输入合同编号"
+ /> </el-form-item
+ ><el-form-item label="合同状态" prop="status">
+ <el-select
+ v-model="queryParams.status"
+ placeholder="请选择合同类型"
+ clearable
+ class="w-[280px]"
+ >
+ <el-option label="未上传" :value="0"></el-option>
+ <el-option label="已上传" :value="1"></el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="resetPage">查询</el-button>
+ <el-button @click="resetParams">重置</el-button>
+ </el-form-item>
+ </el-form>
+ <div class="mt-4">
+ <el-table
+ :data="pager.lists"
+ :default-sort="{ prop: 'create_time', order: 'descending' }"
+ @selection-change="handleSelectionChange"
+ >
+ <el-table-column label="id" prop="id" />
+ <el-table-column label="合同类型" align="center">
+ <template #default="{ row }">
+ {{ statusFn(row.type) }}
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="合同编号"
+ prop="contract_no"
+ align="center"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ label="甲方"
+ prop="company_a_name"
+ align="center"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ label="乙方"
+ prop="company_b_name"
+ align="center"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ label="类型"
+ prop="product_count"
+ align="center"
+ show-overflow-tooltip
+ >
+ <template #default="{ row }"> 公司 </template>
+ </el-table-column>
+ <el-table-column
+ label="状态"
+ prop="product_count"
+ align="center"
+ show-overflow-tooltip
+ >
+ <template #default="{ row }">
+ {{ row.status ? "已上传" : "待上传" }}
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="操作"
+ align="center"
+ width="auto"
+ fixed="right"
+ >
+ <template #default="{ row }">
+ <el-button type="primary" link>
+ <router-link
+ :to="{
+ path: 'contract.contract/vehicle_detail',
+ query: {
+ id: row.id,
+ },
+ }"
+ >详情</router-link
+ >
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ <div class="flex mt-4 justify-end">
+ <pagination v-model="pager" @change="getLists" />
+ </div>
+ </el-card>
+ <edit-popup
+ v-if="showEdit"
+ ref="editRef"
+ @success="getLists"
+ @close="showEdit = false"
+ />
+ </div>
+</template>
+
+<script lang="ts" setup name="flowTypeLists">
+import { usePaging } from "@/hooks/usePaging";
+import { useDictData } from "@/hooks/useDictOptions";
+// import { contractList, sendContract } from "@/api/contract";
+import { leaseContractList } from "@/api/contract";
+
+// import EditPopup from "./edit.vue";
+// let obj = [
+// {
+// cunid: 1,
+// zhgn: [
+// {
+// zhengid: 1,
+// dui: [1, 2, 3],
+// },
+
+// {
+// zhengid: 2,
+// dui: [1, 2, 3],
+// },
+// ],
+// },
+// {
+// cunid: 3,
+// zhgn: [
+// {
+// zhengid: 1,
+// dui: [1, 2, 3],
+// },
+
+// {
+// zhengid: 2,
+// dui: [1, 2, 3],
+// },
+// ],
+// },
+// ];
+interface User {
+ date: string;
+ name: string;
+ address: string;
+ tag: string;
+}
+// const sendContractFn = (id: number) => {
+// sendContract({ id }).then((res) => {
+// console.log(res);
+// });
+// };
+const editRef = shallowRef<InstanceType<typeof EditPopup>>();
+// 是否显示编辑框
+const showEdit = ref(false);
+// 查询条件
+// 'order_sn' =>订单编号,'shop_name'=> 商家名称,'shop_phone' => 商家电话,'shop_address' => 商家地址,'user_name' => 收件人名称,'user_address' => 收件人地址,'user_phone' =>收件人电话
+const queryParams = reactive({
+ company_name: "",
+ contract_no: "",
+ status: "",
+});
+const statusFn = (status: number) => {
+ switch (status) {
+ case 0:
+ return "租赁合同";
+ break;
+ case 1:
+ return "自由车辆合同";
+ break;
+ case 2:
+ return "解除合同";
+ break;
+ case 3:
+ return "签约成功";
+ break;
+ case 4:
+ return "被驳回";
+ break;
+ default:
+ break;
+ }
+};
+// 选中数据
+const selectData = ref<any[]>([]);
+
+// 表格选择后回调事件
+const handleSelectionChange = (val: any[]) => {
+ selectData.value = val.map(({ id }) => id);
+};
+const filterHandler = (value: string, row: any, column: any) => {
+ return row.status == value;
+};
+// 获取字典数据
+const { dictData } = useDictData("");
+// 分页相关
+const { pager, getLists, resetParams, resetPage } = usePaging({
+ fetchFun: leaseContractList,
+ params: queryParams,
+});
+const handleView = async (data: any) => {
+ showEdit.value = true;
+ await nextTick();
+ editRef.value?.open(data.id);
+};
+getLists();
+</script>