新增进件管理
This commit is contained in:
268
src/views/applyments/index.vue
Normal file
268
src/views/applyments/index.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<!-- 进件管理 -->
|
||||
<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>{{ statusListFilter(scope.row.alipayStatus).label }}</div>
|
||||
<el-text type="danger" v-if="scope.row.alipayStatus == 'REJECTED'">{{ scope.row.alipayErrorMsg
|
||||
}}</el-text>
|
||||
<el-link type="primary" v-if="scope.row.alipayStatus == 'SIGN '"
|
||||
@click="singCodeDialogRef?.show(scope.row.alipaySignUrl, 1)">查看签约码</el-link>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="微信进件状态" prop="wechatStatus" min-width="200">
|
||||
<template v-slot="scope">
|
||||
<div class="column">
|
||||
<div>{{ statusListFilter(scope.row.wechatStatus).label }}</div>
|
||||
<el-text type="danger" v-if="scope.row.wechatStatus == 'REJECTED'">{{ scope.row.wechatErrorMsg
|
||||
}}</el-text>
|
||||
<el-link type="primary" v-if="scope.row.wechatStatus == 'SIGN '"
|
||||
@click="singCodeDialogRef?.show(scope.row.wechatSignUrl, 2)">查看签约码</el-link>
|
||||
</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="150">
|
||||
<template v-slot="scope">
|
||||
<el-button link type="primary" @click="toDetail(scope.row)">详情</el-button>
|
||||
<el-button link type="primary" @click="toDetail(scope.row)">修改</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 } 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: '待提交'
|
||||
},
|
||||
{
|
||||
value: 'INIT',
|
||||
label: '待处理'
|
||||
},
|
||||
{
|
||||
value: 'AUDIT',
|
||||
label: '待审核'
|
||||
},
|
||||
{
|
||||
value: 'SIGN',
|
||||
label: '待签约'
|
||||
},
|
||||
{
|
||||
value: 'FINISH',
|
||||
label: '已完成'
|
||||
},
|
||||
{
|
||||
value: 'REJECTED',
|
||||
label: '失败'
|
||||
},
|
||||
])
|
||||
|
||||
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 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) {
|
||||
const businessLicenceInfo = JSON.parse(row.businessLicenceInfo)
|
||||
router.push({
|
||||
name: 'applyment_in',
|
||||
query: {
|
||||
shopId: row.shopId,
|
||||
licenceNo: businessLicenceInfo.licenceNo
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user