mkm/TaskSystem-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新三轮车

Browse Source
This commit is contained in:
weipengfei 2023-09-27 11:00:41 +08:00
parent 177cc9db9f
commit 95c7d2e588
2 changed files with 252 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

@ -2,4 +2,6 @@ NODE_ENV = 'development'
VITE_APP_BASE_URL = 'https://ceshi-worker-task.lihaink.cn' VITE_APP_BASE_URL = 'https://ceshi-worker-task.lihaink.cn'
# VITE_APP_BASE_URL = 'https://worker-task.lihaink.cn' # VITE_APP_BASE_URL = 'https://preview-worker-task.lihaink.cn'
# VITE_APP_BASE_URL = 'https://worker-task.lihaink.cn'preview

409
src/views/contract/vehicle_list.vue
View File

@ -1,96 +1,185 @@
<template> <template>
<div> <div>
<el-card class="!border-none" v-loading="pager.loading" shadow="never"> <el-card class="!border-none" v-loading="pager.loading" shadow="never">
<el-form class="mb-[-16px]" inline> <el-form class="mb-[-16px]" inline>
<el-form-item label="公司名称" prop="company_name"> <el-form-item label="公司名称" prop="company_name">
<el-input class="w-[280px]" v-model="queryParams.company_name" clearable placeholder="请输入公司名称" /> <el-input
</el-form-item> class="w-[280px]"
<el-form-item label="合同编号" prop="contract_no"> v-model="queryParams.company_name"
<el-input class="w-[280px]" v-model="queryParams.contract_no" clearable placeholder="请输入合同编号" /> clearable
</el-form-item><el-form-item label="合同状态" prop="status"> placeholder="请输入公司名称"
<el-select v-model="queryParams.status" placeholder="请选择合同类型" clearable class="w-[280px]"> />
<el-option label="未上传" :value="0"></el-option> </el-form-item>
<el-option label="已上传" :value="1"></el-option> <el-form-item label="合同编号" prop="contract_no">
</el-select> <el-input
</el-form-item> class="w-[280px]"
<el-form-item> v-model="queryParams.contract_no"
<el-button type="primary" @click="resetPage">查询</el-button> clearable
<el-button @click="resetParams">重置</el-button> placeholder="请输入合同编号"
</el-form-item> /> </el-form-item
</el-form> ><el-form-item label="合同状态" prop="status">
<div class="mt-4"> <el-select
<el-table :data="pager.lists" :default-sort="{ prop: 'create_time', order: 'descending' }" v-model="queryParams.status"
@selection-change="handleSelectionChange"> placeholder="请选择合同类型"
<el-table-column label="id" prop="id" /> clearable
<el-table-column label="合同类型" align="center"> class="w-[280px]"
<template #default="{ row }"> >
{{ typeFn(row.type) }} <el-option label="未上传" :value="0"></el-option>
</template> <el-option label="已上传" :value="1"></el-option>
</el-table-column> </el-select>
<el-table-column label="合同编号" prop="contract_no" align="center" show-overflow-tooltip /> </el-form-item>
<el-table-column label="甲方" prop="company_a_name" align="center" show-overflow-tooltip /> <el-form-item>
<el-table-column label="乙方" prop="company_b_name" align="center" show-overflow-tooltip /> <el-button type="primary" @click="resetPage">查询</el-button>
<el-table-column label="类型" prop="product_count" align="center" show-overflow-tooltip> <el-button @click="resetParams">重置</el-button>
<template #default="{ row }"> 公司 </template> </el-form-item>
</el-table-column> </el-form>
<el-table-column label="租车数量(辆)" prop="num" align="center" show-overflow-tooltip /> <div class="mt-4">
<el-table-column label="状态" prop="product_count" align="center" show-overflow-tooltip> <el-table
<template #default="{ row }"> :data="pager.lists"
<span :style="`color:${statusFn(row.status).color}`"> :default-sort="{ prop: 'create_time', order: 'descending' }"
{{ statusFn(row.status).tit }}</span> @selection-change="handleSelectionChange"
</template> >
</el-table-column> <el-table-column label="id" prop="id" />
<el-table-column label="操作" align="center" width="auto" fixed="right"> <el-table-column label="合同类型" align="center">
<template #default="{ row }"> <template #default="{ row }">
<el-button type="primary" link v-perms="['contract.contract/wind_control']" {{ typeFn(row.type) }}
v-if="row.status == 0"> </template>
<router-link :to="{ </el-table-column>
path: 'vehicle_detail', <el-table-column
query: { label="合同编号"
id: row.id, prop="contract_no"
}, align="center"
}">审核</router-link> show-overflow-tooltip
</el-button> />
<el-button type="primary" link v-perms="['contract.contract/wind_control']" <el-table-column
v-if="row.status > 0"> label="甲方"
<router-link :to="{ prop="company_a_name"
path: 'vehicle_detail', align="center"
query: { show-overflow-tooltip
id: row.id, />
}, <el-table-column
}">详情</router-link> label="乙方"
</el-button> prop="company_b_name"
<el-button v-if="row.status == 1 && row.contract_logistic_id != 0" type="primary" link align="center"
@click="sendContractPopFn(row.id)">发送合同</el-button> show-overflow-tooltip
<el-button v-if="row.status == 2" :disabled="row.nums > 0" @click="sendAgaintPopFn(row.id)" link />
type="primary">重新发送{{ row.nums ? row.nums + "s" : "" }}</el-button> <el-table-column
<el-button v-if="row.status == 3" type="primary" link> label="类型"
<a :href="JSON.parse(row.contract_evidence).party_a">下载证据</a> prop="product_count"
</el-button> align="center"
</template> show-overflow-tooltip
</el-table-column> >
</el-table> <template #default="{ row }"> 公司 </template>
</div> </el-table-column>
<div class="flex mt-4 justify-end"> <el-table-column
<pagination v-model="pager" @change="getLists" /> label="租车数量(辆)"
</div> prop="num"
</el-card> align="center"
show-overflow-tooltip
/>
<el-table-column
label="状态"
prop="product_count"
align="center"
show-overflow-tooltip
>
<template #default="{ row }">
<span :style="`color:${statusFn(row.status).color}`">
{{ statusFn(row.status).tit }}</span
>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
width="auto"
fixed="right"
>
<template #default="{ row }">
<el-button
type="primary"
link
v-perms="['contract.contract/wind_control']"
v-if="row.status == 0"
>
<router-link
:to="{
path: 'vehicle_detail',
query: {
id: row.id,
},
}"
>审核</router-link
>
</el-button>
<el-button
type="primary"
link
v-perms="['contract.contract/wind_control']"
v-if="row.status > 0"
>
<router-link
:to="{
path: 'vehicle_detail',
query: {
id: row.id,
},
}"
>详情</router-link
>
</el-button>
<el-button
v-if="row.status == 1 && row.contract_logistic_id != 0"
type="primary"
link
@click="sendContractPopFn(row.id)"
>发送合同</el-button
>
<el-button
v-if="row.status == 2"
:disabled="row.nums > 0"
@click="sendAgaintPopFn(row.id)"
link
type="primary"
>重新发送{{ row.nums ? row.nums + "s" : "" }}</el-button
>
<el-button v-if="row.status == 3" type="primary" link>
<a :href="JSON.parse(row.contract_evidence).party_a"
>下载证据</a
>
</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>
<el-dialog v-model="showPop" @close="offPop"> <el-dialog v-model="showPop" @close="offPop">
<h1>重要提醒</h1> <h1>重要提醒</h1>
<div class="content" v-if="!sendAgainPop"> <div class="content" v-if="!sendAgainPop">
请确认信息是否有误,发送合同,请确认信息是否有误,发送电子合同后短时间内将不可再次发送. 请确认信息是否有误,发送合同,请确认信息是否有误,发送电子合同后短时间内将不可再次发送.
</div> </div>
<div class="content" v-else> <div class="content" v-else>
确认签约短信将在60秒后发送,请注意查收,并点击短信链接进行线上合同签约 确认签约短信将在60秒后发送,请注意查收,并点击短信链接进行线上合同签约
</div> </div>
<p class="btn_menu"> <p class="btn_menu">
<el-button type="primary" size="large" v-if="!sendAgainPop" @click="sendContractFn">确认</el-button> <el-button
<el-button type="primary" size="large" v-else @click="sendAgain">重新发送</el-button> type="primary"
<el-button type="info" size="large" @click="offPop">返回</el-button> size="large"
</p> v-if="!sendAgainPop"
</el-dialog> @click="sendContractFn"
</div> >确认</el-button
>
<el-button type="primary" size="large" v-else @click="sendAgain"
>重新发送</el-button
>
<el-button type="info" size="large" @click="offPop">返回</el-button>
</p>
</el-dialog>
</div>
</template> </template>
<script lang="ts" setup name="flowTypeLists"> <script lang="ts" setup name="flowTypeLists">
@ -107,127 +196,127 @@ var contractId = 0;
const showPop = ref(false); const showPop = ref(false);
const sendAgainPop = ref(false); const sendAgainPop = ref(false);
const sendAgain = () => { const sendAgain = () => {
sendMsg({ id: contractId }).then((res) => { sendMsg({ id: contractId }).then((res) => {
var inde = pager.lists.findIndex(function (element) { var inde = pager.lists.findIndex(function (element) {
return element.id === contractId; return element.id === contractId;
});
index.value = inde;
pager.lists[index.value].nums = 10;
timeFn(index.value);
}); });
(sendAgainPop.value = true), (index.value = inde);
pager.lists[index.value].nums = 10;
timeFn(index.value);
});
}; };
const timeFn = (i: number) => { const timeFn = (i: number) => {
const timers = setInterval(() => { const timers = setInterval(() => {
pager.lists[i].nums--; pager.lists[i].nums--;
if (pager.lists[i].nums <= 0) { if (pager.lists[i].nums <= 0) {
clearInterval(timers); clearInterval(timers);
} }
}, 1000); }, 1000);
}; };
const sendContractPopFn = (id: number) => { const sendContractPopFn = (id: number) => {
(showPop.value = true), (sendAgainPop.value = true), (contractId = id); (showPop.value = true), (contractId = id);
}; };
const sendAgaintPopFn = (id: number) => { const sendAgaintPopFn = (id: number) => {
(showPop.value = true), (contractId = id); (showPop.value = true), (contractId = id);
}; };
const sendContractFn = () => { const sendContractFn = () => {
sendContract({ id: contractId }).then((res) => { sendContract({ id: contractId }).then((res) => {
feedback.msgSuccess("发送成功"); feedback.msgSuccess("发送成功");
var inde = pager.lists.findIndex(function (element) { var inde = pager.lists.findIndex(function (element) {
return element.id === contractId; return element.id === contractId;
});
index.value = inde;
showPop.value = false;
pager.lists[index.value].status = 2;
pager.lists[index.value].nums = 10;
timeFn(index.value);
}); });
index.value = inde;
showPop.value = false;
pager.lists[index.value].status = 2;
pager.lists[index.value].nums = 10;
timeFn(index.value);
});
}; };
const offPop = () => { const offPop = () => {
showPop.value = false; showPop.value = false;
// showConctactPop.value = false; // showConctactPop.value = false;
}; };
// 查询条件 // 查询条件
const queryParams = reactive({ const queryParams = reactive({
company_name: "", company_name: "",
contract_no: "", contract_no: "",
status: "", status: "",
}); });
const statusFn = (status: number) => { const statusFn = (status: number) => {
switch (status) { switch (status) {
case 0: case 0:
return { tit: "待上传", color: "rgb(238, 190, 119)" }; return { tit: "待上传", color: "rgb(238, 190, 119)" };
case 1: case 1:
return { tit: "已上传", color: "rgb(103, 194, 58)" }; return { tit: "已上传", color: "rgb(103, 194, 58)" };
case 2: case 2:
return { tit: "签约中", color: "red" }; return { tit: "签约中", color: "red" };
case 3: case 3:
return { tit: "已签约", color: "rgb(103, 194, 58)" }; return { tit: "已签约", color: "rgb(103, 194, 58)" };
// default: // default:
// return { tit: "审核通过", color: "green" }; // return { tit: "审核通过", color: "green" };
} }
}; };
const typeFn = (status: number) => { const typeFn = (status: number) => {
switch (status) { switch (status) {
case 0: case 0:
return "租赁合同"; return "租赁合同";
case 1: case 1:
return "自由车辆合同"; return "自由车辆合同";
case 2: case 2:
return "解除合同"; return "解除合同";
default: default:
} }
}; };
// 选中数据 // 选中数据
const selectData = ref<any[]>([]); const selectData = ref<any[]>([]);
// 表格选择后回调事件 // 表格选择后回调事件
const handleSelectionChange = (val: any[]) => { const handleSelectionChange = (val: any[]) => {
selectData.value = val.map(({ id }) => id); selectData.value = val.map(({ id }) => id);
}; };
// 获取字典数据 // 获取字典数据
const { dictData } = useDictData(""); const { dictData } = useDictData("");
// 分页相关 // 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({ const { pager, getLists, resetParams, resetPage } = usePaging({
fetchFun: leaseContractList, fetchFun: leaseContractList,
params: queryParams, params: queryParams,
}); });
getLists(); getLists();
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.btn { .btn {
position: absolute; position: absolute;
} }
h1 { h1 {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
font-size: 30px; font-size: 30px;
color: red; color: red;
margin-bottom: 10px; margin-bottom: 10px;
} }
.content { .content {
font-size: 20px; font-size: 20px;
} }
.info { .info {
color: red; color: red;
font-weight: bold; font-weight: bold;
font-size: 18px; font-size: 18px;
display: inline-block; display: inline-block;
margin: 0 5px; margin: 0 5px;
} }
.btn_menu { .btn_menu {
margin-top: 10vh; margin-top: 10vh;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
} }
</style> </style>