312 lines
9.1 KiB
Vue
312 lines
9.1 KiB
Vue
<!-- 进件管理 -->
|
|
<template>
|
|
<div class="gyq_container">
|
|
<div class="gyq_content">
|
|
<div class="row">
|
|
<el-form :model="queryForm" inline>
|
|
<el-form-item label="商户类型">
|
|
<el-select v-model="queryForm.userType" style="width: 200px;">
|
|
<el-option v-for="item in userTypeList" :key="item.value" :label="item.label"
|
|
:value="item.value"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="店铺名称">
|
|
<el-input style="width: 200px;" v-model="queryForm.shopName" placeholder="请输入店铺名称"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="进件状态">
|
|
<el-select v-model="queryForm.status" style="width: 200px;">
|
|
<el-option v-for="item in statusList" :key="item.value" :label="item.label"
|
|
:value="item.value"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="支付宝账号">
|
|
<el-input style="width: 200px;" v-model="queryForm.alipayAccount" placeholder="请输入支付宝账号"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="Search" :loading="tableData.loading" @click="queryHandle">查询</el-button>
|
|
<el-button icon="Refresh" :loading="tableData.loading" @click="resetHandle">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="row">
|
|
<el-button type="primary" icon="Plus" @click="selectShopsDialogRef?.show()">发起进件</el-button>
|
|
</div>
|
|
<div class="row mt14">
|
|
<el-table :data="tableData.list" v-loading="tableData.loading" stripe border>
|
|
<el-table-column label="商户号" prop="merchantCode" width="200"></el-table-column>
|
|
<el-table-column label="商户简称" prop="shortName" width="150"></el-table-column>
|
|
<el-table-column label="商户类型" prop="userType" width="120">
|
|
<template v-slot="scope">
|
|
{{ userTypeListFilter(scope.row.userType).label }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="绑定店铺名称" prop="shopName" width="200"></el-table-column>
|
|
<el-table-column label="支付宝进件状态" prop="alipayStatus" min-width="200">
|
|
<template v-slot="scope">
|
|
<div class="column">
|
|
<div>
|
|
<el-tag :type="statusListFilter(scope.row.alipayStatus).type" disable-transitions>{{
|
|
statusListFilter(scope.row.alipayStatus).label }}</el-tag>
|
|
</div>
|
|
<div class="error_text" v-if="scope.row.alipayStatus == 'REJECTED'">
|
|
{{ scope.row.alipayErrorMsg }}
|
|
</div>
|
|
<div>
|
|
<el-link type="primary" v-if="scope.row.alipayStatus == 'SIGN '"
|
|
@click="singCodeDialogRef?.show(scope.row.alipaySignUrl, 1)">查看签约码</el-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="微信进件状态" prop="wechatStatus" min-width="200">
|
|
<template v-slot="scope">
|
|
<div class="column">
|
|
<div>
|
|
<el-tag :type="statusListFilter(scope.row.wechatStatus).type" disable-transitions>{{
|
|
statusListFilter(scope.row.wechatStatus).label }}</el-tag>
|
|
</div>
|
|
<div class="error_text" v-if="scope.row.wechatStatus == 'REJECTED'">
|
|
{{ scope.row.wechatErrorMsg }}
|
|
</div>
|
|
<div>
|
|
<el-link type="primary" v-if="scope.row.wechatStatus == 'SIGN'"
|
|
@click="singCodeDialogRef?.show(scope.row.wechatSignUrl, 2)">查看签约码</el-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="更新时间" prop="updateTime" width="200"></el-table-column>
|
|
<el-table-column label="创建时间" prop="createTime" width="200"></el-table-column>
|
|
<el-table-column label="操作" fixed="right" width="160">
|
|
<template v-slot="scope">
|
|
<el-button link type="primary"
|
|
v-if="scope.row.wechatStatus == 'INIT' || scope.row.wechatStatus == 'AUDIT' || scope.row.wechatStatus == 'SIGN' || scope.row.alipayStatus == 'INIT' || scope.row.alipayStatus == 'AUDIT' || scope.row.alipayStatus == 'SIGN'"
|
|
@click="checkStatusHandle(scope.row)">查询</el-button>
|
|
<el-button link type="primary" @click="toDetail(scope.row, 'check')">详情</el-button>
|
|
<el-button link type="primary" @click="toDetail(scope.row, 'editor')"
|
|
v-if="scope.row.alipayStatus == 'REJECTED' || scope.row.wechatStatus == 'REJECTED'">修改</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="row mt14">
|
|
<el-pagination v-model:current-page="tableData.page" v-model:page-size="tableData.size"
|
|
:page-sizes="[10, 30, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
|
|
:total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
|
</div>
|
|
</div>
|
|
<!-- 选择商户 -->
|
|
<selectShopsDialog ref="selectShopsDialogRef" @success="selectSuccessHandle" />
|
|
<!-- 显示签约码 -->
|
|
<singCodeDialog ref="singCodeDialogRef" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from "vue";
|
|
import { useRouter } from 'vue-router';
|
|
import selectShopsDialog from "./components/selectShopsDialog.vue";
|
|
import singCodeDialog from "./components/singCodeDialog.vue";
|
|
import { entryManagerList, queryEntry } from '@/api/common'
|
|
|
|
const singCodeDialogRef = ref(null)
|
|
|
|
const router = useRouter();
|
|
|
|
const selectShopsDialogRef = ref(null);
|
|
|
|
// 选择商户成功回调
|
|
function selectSuccessHandle(shop) {
|
|
console.log('选择的商户：', shop);
|
|
router.push({ name: 'applyment_in', query: { shopId: shop.id } });
|
|
}
|
|
|
|
const userTypeList = ref([
|
|
{
|
|
value: '0',
|
|
label: '个体商户'
|
|
},
|
|
{
|
|
value: '1',
|
|
label: '企业商户'
|
|
},
|
|
])
|
|
|
|
function userTypeListFilter(userType) {
|
|
let obj = userTypeList.value.find(item => item.value == userType)
|
|
if (obj) {
|
|
return obj
|
|
} else {
|
|
return {
|
|
label: userType,
|
|
value: userType
|
|
}
|
|
}
|
|
}
|
|
|
|
const statusList = ref([
|
|
{
|
|
value: 'WAIT',
|
|
label: '待提交',
|
|
type: 'info'
|
|
},
|
|
{
|
|
value: 'INIT',
|
|
label: '待处理',
|
|
type: 'info'
|
|
},
|
|
{
|
|
value: 'AUDIT',
|
|
label: '待审核',
|
|
type: 'warning'
|
|
},
|
|
{
|
|
value: 'SIGN',
|
|
label: '待签约',
|
|
type: 'primary'
|
|
},
|
|
{
|
|
value: 'FINISH',
|
|
label: '已完成',
|
|
type: 'success'
|
|
},
|
|
{
|
|
value: 'REJECTED',
|
|
label: '失败',
|
|
type: 'danger'
|
|
},
|
|
])
|
|
|
|
function statusListFilter(status) {
|
|
let obj = statusList.value.find(item => item.value == status)
|
|
if (obj) {
|
|
return obj
|
|
} else {
|
|
return {
|
|
label: status,
|
|
value: status
|
|
}
|
|
}
|
|
}
|
|
|
|
const queryForm = ref({
|
|
userType: '',
|
|
shopName: '',
|
|
status: '',
|
|
alipayAccount: ''
|
|
});
|
|
|
|
function queryHandle() {
|
|
tableData.page = 1
|
|
getTableData()
|
|
}
|
|
|
|
function resetHandle() {
|
|
queryForm.value.userType = ''
|
|
queryForm.value.shopName = ''
|
|
queryForm.value.status = ''
|
|
queryForm.value.alipayAccount = ''
|
|
queryHandle()
|
|
}
|
|
|
|
const tableData = reactive({
|
|
loading: false,
|
|
page: 1,
|
|
size: 10,
|
|
total: 0,
|
|
list: [],
|
|
})
|
|
|
|
// 分页大小发生变化
|
|
function handleSizeChange(e) {
|
|
tableData.size = e;
|
|
getTableData();
|
|
}
|
|
|
|
// 分页发生变化
|
|
function handleCurrentChange(e) {
|
|
tableData.page = e;
|
|
getTableData();
|
|
}
|
|
|
|
// 查询状态
|
|
async function checkStatusHandle(row) {
|
|
try {
|
|
tableData.loading = true
|
|
const businessLicenceInfo = JSON.parse(row.businessLicenceInfo)
|
|
await queryEntry({
|
|
shopId: row.shopId,
|
|
licenceNo: businessLicenceInfo.licenceNo
|
|
})
|
|
getTableData()
|
|
} catch (error) {
|
|
tableData.loading = false
|
|
console.log(error);
|
|
}
|
|
}
|
|
|
|
// 获取表格数据
|
|
async function getTableData() {
|
|
try {
|
|
tableData.loading = true
|
|
const res = await entryManagerList({
|
|
page: tableData.page,
|
|
size: tableData.size,
|
|
...queryForm.value
|
|
})
|
|
tableData.list = res.records
|
|
tableData.total = res.totalRow
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
setTimeout(() => {
|
|
tableData.loading = false;
|
|
}, 300);
|
|
}
|
|
|
|
// 跳转编辑页面
|
|
function toDetail(row, type) {
|
|
const businessLicenceInfo = JSON.parse(row.businessLicenceInfo)
|
|
router.push({
|
|
name: 'applyment_in',
|
|
query: {
|
|
shopId: row.shopId,
|
|
licenceNo: businessLicenceInfo.licenceNo,
|
|
type: type
|
|
}
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
getTableData()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.gyq_container {
|
|
padding: 14px;
|
|
|
|
.gyq_content {
|
|
padding: 14px;
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
|
|
.row {
|
|
&.mt14 {
|
|
margin-top: 14px;
|
|
}
|
|
}
|
|
|
|
.column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.error_text {
|
|
font-size: 14px;
|
|
color: var(--el-color-danger);
|
|
}
|
|
</style> |