From a5f6554ec4915932eb2536ca3ee3aee58c5966c4 Mon Sep 17 00:00:00 2001
From: weipengfei <2187978347@qq.com>
Date: Tue, 5 Sep 2023 19:37:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=B8=89=E8=BD=AE=E8=BD=A6?=
 =?UTF-8?q?=E5=90=88=E5=90=8C=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/car_contract.ts               |   6 +
 src/views/card_contract/detail.vue    | 334 ++++++++++++++++++++++++++
 src/views/card_contract/index.vue     | 194 +++++++++++++++
 src/views/contract/vehicle_detail.vue |   7 +
 4 files changed, 541 insertions(+)
 create mode 100644 src/api/car_contract.ts
 create mode 100644 src/views/card_contract/detail.vue
 create mode 100644 src/views/card_contract/index.vue

diff --git a/src/api/car_contract.ts b/src/api/car_contract.ts
new file mode 100644
index 0000000..309ce6a
--- /dev/null
+++ b/src/api/car_contract.ts
@@ -0,0 +1,6 @@
+import request from '@/utils/request'
+
+// 合同列表
+export function apiContractLists(params: any) {
+    return request.get({ url: '/contract.VehicleContract/townRentList', params })
+}
diff --git a/src/views/card_contract/detail.vue b/src/views/card_contract/detail.vue
new file mode 100644
index 0000000..1b273c7
--- /dev/null
+++ b/src/views/card_contract/detail.vue
@@ -0,0 +1,334 @@
+<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_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="headimg">
+              <el-upload
+                :disabled="isDisabled"
+                v-model="formData.avatar"
+                class="avatar-uploader-head"
+                :data="{ cid: 1 }"
+                action="https://worker-task.lihaink.cn/api/upload/image"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccessAvatar"
+              >
+                <img
+                  v-if="formData.avatar"
+                  :src="formData.avatar"
+                  class="avatar"
+                />
+                <el-icon v-else class="avatar-uploader-icon">
+                  <Plus />
+                </el-icon>
+              </el-upload>
+            </div> -->
+            <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-col :span="10">
+                        <el-form-item label="片区经理" prop="area_manager_name">
+                            <el-input
+                                :disabled="isDisabled"
+                                v-model="formData.area_manager_name"
+                                placeholder="选择片区经理"
+                                clearable
+                                :style="{ width: '100%' }"
+                                @click="isAreaManager = true"
+                            ></el-input>
+                        </el-form-item>
+                    </el-col> -->
+              </el-row>
+            </div>
+          </div>
+        </el-row>
+      </el-col>
+
+      <!-- <div style="font-size: 1.2rem; margin: 10px 0">资质信息</div> -->
+
+      <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="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-button @click="create">完成</el-button> -->
+    <el-button
+      v-if="formData.status == 1"
+      type="primary"
+      :disabled="isDisabled"
+      size="medium"
+      @click="create"
+      >发送合同</el-button
+    ><el-button
+      v-if="formData.status == 2"
+      type="primary"
+      :disabled="num"
+      size="medium"
+      @click="sendAgain"
+      >重新发送{{ num ? num + "s" : "" }}</el-button
+    >
+
+    <el-button type="primary" @click="checkContract" v-if="formData.file"
+      >查看合同</el-button
+    >
+  </div>
+</template>
+<script setup>
+import { reactive, ref } from "vue";
+import { contractDetail, sendContract, sendMsg } from "@/api/contract";
+import feedback from "@/utils/feedback";
+
+const router = useRouter();
+const route = useRoute();
+const formData = reactive({
+  id: 8,
+  contract_no: "",
+  company_a_name: "",
+  company_a_code: "",
+  company_a_user: "",
+  company_a_phone: "",
+  company_a_email: "",
+  company_b_id: 165,
+  company_b_name: "",
+  company_b_user: "",
+  company_b_phone: "",
+  company_b_code: "",
+  company_b_email: "",
+  num: 1,
+  cars_info: [
+    {
+      id: 20,
+      license: "",
+    },
+  ],
+  status: 0,
+  file: "",
+  contract_url: "",
+  signing_timer: 0,
+  url: null,
+  create_time: "",
+  update_time: "",
+});
+const num = ref(0);
+// route.query.flag
+
+contractDetail({ id: route.query.id }).then((res) => {
+  for (let key in formData) {
+    formData[key] = res[key];
+  }
+  console.log(formData);
+});
+const checkContract = () => {
+  window.open(formData.contract_url, "_blank");
+};
+const timeFn = () => {
+  const timers = setInterval(() => {
+    num.value--;
+    if (num.value <= 0) {
+      clearInterval(timeFn);
+    }
+  }, 1000);
+};
+const create = () => {
+  sendContract({
+    id: route.query.id,
+  }).then((res) => {
+    formData.status = 2;
+    feedback.msgSuccess("发送成功");
+    num.value = 10;
+    timeFn();
+  });
+};
+const sendAgain = () => {
+  sendMsg({ id: route.query.id }).then((res) => {
+    feedback.msgSuccess("发送成功");
+    num.value = 10;
+    timeFn();
+  });
+};
+</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/card_contract/index.vue b/src/views/card_contract/index.vue
new file mode 100644
index 0000000..146f405
--- /dev/null
+++ b/src/views/card_contract/index.vue
@@ -0,0 +1,194 @@
+<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.company_b_user"
+            clearable
+            placeholder="请输入联系人"
+          /> </el-form-item
+        ><el-form-item label="联系方式" prop="status">
+          <el-input
+            class="w-[280px]"
+            v-model="queryParams.company_b_phone"
+            clearable
+            placeholder="请输入联系方式"
+          />
+        </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' }"
+        >
+          <el-table-column
+            label="公司名称"
+            :width="250"
+            prop="company_b_name"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="社会代码"
+            prop="company_b_code"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="主要联系人"
+            prop="company_b_user"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="联系方式"
+            prop="company_b_phone"
+            align="center"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="租车数量"
+            prop="num"
+            align="center"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="合同状态"
+            prop="num"
+            align="center"
+            show-overflow-tooltip
+          >
+            <template #default="{ row }">
+              {{ row.status >= 3 ? "已签约" : "未签约" }}
+            </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/detail',
+                    query: {
+                      id: row.id,
+                    },
+                  }"
+                  >查看</router-link
+                >
+              </el-button>
+              <!-- <el-button type="primary" link @click="test(row.id)">
+                查看
+              </el-button> -->
+              <el-button
+                v-if="row.status == 1"
+                type="primary"
+                link
+                @click="sendContractFn(row.id)"
+                >发送合同</el-button
+              >
+              <el-button
+                v-if="row.status == 2"
+                :disabled="row.nums > 0"
+                @click="sendAgain(row.id)"
+                link
+                type="primary"
+                >重新发送{{ row.nums ? row.nums + "s" : "" }}</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, sendMsg } from "@/api/contract";
+import { apiContractLists } from "@/api/car_contract";
+import feedback from "@/utils/feedback";
+
+const sendAgain = (id: number) => {
+  sendMsg({ id }).then((res) => {
+    var inde = pager.lists.findIndex(function (element) {
+      return element.id === id;
+    });
+    index.value = inde;
+    pager.lists[index.value].nums = 10;
+    timeFn(index.value);
+  });
+};
+const timeFn = (i: number) => {
+  const timers = setInterval(() => {
+    pager.lists[i].nums--;
+    if (pager.lists[i].nums <= 0) {
+      clearInterval(timers);
+    }
+  }, 1000);
+};
+const index = ref(0);
+
+const sendContractFn = (id: number) => {
+  sendContract({ id }).then((res) => {
+    feedback.msgSuccess("发送成功");
+    var inde = pager.lists.findIndex(function (element) {
+      return element.id === id;
+    });
+    index.value = inde;
+    pager.lists[index.value].status = 2;
+    pager.lists[index.value].nums = 10;
+    timeFn(index.value);
+  });
+};
+const test = () => {
+  //   console.log(5454);
+};
+// 查询条件
+const queryParams = reactive({
+  company_name: "",
+  company_b_user: "",
+  company_b_phone: "",
+});
+// 分页相关
+const { pager, getLists, resetParams, resetPage } = usePaging({
+  fetchFun: apiContractLists,
+  params: queryParams,
+});
+// console.log(pager.lists);
+
+const handleView = async (data: any) => {
+  showEdit.value = true;
+  await nextTick();
+  editRef.value?.open(data.id);
+};
+getLists().then((res) => {
+  pager.lists.forEach((item, index) => {
+    item.nums = 0;
+  });
+});
+</script>
diff --git a/src/views/contract/vehicle_detail.vue b/src/views/contract/vehicle_detail.vue
index 4ef6064..b488788 100644
--- a/src/views/contract/vehicle_detail.vue
+++ b/src/views/contract/vehicle_detail.vue
@@ -212,6 +212,9 @@
     >
       <el-button :disabled="isDisabled" type="primary">上传合同</el-button>
     </el-upload>
+    <el-button type="primary" @click="checkContract" v-if="formData.file"
+      >查看合同</el-button
+    >
   </div>
 </template>
 <script setup>
@@ -258,6 +261,9 @@ const base_url = inject("base_url");
 // leaseContractDetail({ id: route.query.id }).then((res) => {
 //   console.log(res);
 // });
+const checkContract = () => {
+  window.open(formData.file, "_blank");
+};
 leaseContractDetail({ id: route.query.id }).then((res) => {
   for (let key in formData) {
     formData[key] = res[key];
@@ -272,6 +278,7 @@ leaseContractDetail({ id: route.query.id }).then((res) => {
 });
 
 const handleAvatarSuccess_three = (response, uploadFile) => {
+  formData.file = response.data.uri;
   leaseUpContract({
     id: route.query.id,
     file: response.data.uri,