初始化项目
This commit is contained in:
18500206848
579
src/views/manage/station/mainList.vue
Normal file
579
src/views/manage/station/mainList.vue
Normal file
@@ -0,0 +1,579 @@
|
||||
<template>
|
||||
<basic-container>
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
ref="crud"
|
||||
v-model="form"
|
||||
:permission="permissionList"
|
||||
:before-open="beforeOpen"
|
||||
:before-close="beforeClose"
|
||||
:page.sync="page"
|
||||
@row-update="rowUpdate"
|
||||
@row-save="rowSave"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template slot="menu" slot-scope="{row}">
|
||||
<el-button
|
||||
v-if="vaildData(permission.manage_station_mainList_stop, false) && row.status !== 9"
|
||||
size="small"
|
||||
icon="el-icon-delete"
|
||||
@click.stop="stop(row)"
|
||||
type="text"
|
||||
>终止合作</el-button>
|
||||
</template>
|
||||
<template slot="cityIdForm" slot-scope="{disabled}">
|
||||
<jl-city-cascader :disabled="disabled" v-model="form.cityId" filterable clearable></jl-city-cascader>
|
||||
</template>
|
||||
<template slot="authUrlIdImgForm">
|
||||
<el-image
|
||||
style="width: 100px; height: 100px"
|
||||
:src="form.authUrlId"
|
||||
:preview-src-list="[form.authUrlId]"
|
||||
></el-image>
|
||||
</template>
|
||||
<template slot="authUrlIdImgForm">
|
||||
<el-image
|
||||
style="width: 100px; height: 100px"
|
||||
:src="form.authUrlId"
|
||||
:preview-src-list="[form.authUrlId]"
|
||||
></el-image>
|
||||
</template>
|
||||
<template slot="identityUrl4IdImgForm">
|
||||
<el-image
|
||||
style="width: 100px; height: 100px"
|
||||
:src="form.identityUrl4Id"
|
||||
:preview-src-list="[form.identityUrl4Id]"
|
||||
></el-image>
|
||||
</template>
|
||||
<template slot="identityUrl5IdImgForm">
|
||||
<el-image
|
||||
style="width: 100px; height: 100px"
|
||||
:src="form.identityUrl5Id"
|
||||
:preview-src-list="[form.identityUrl5Id]"
|
||||
></el-image>
|
||||
</template>
|
||||
</avue-crud>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { companyInfoAdd, companyStationInfo, companyDetail, companyUpdate, stationStop } from "@/api/manage/main";
|
||||
// import { getStationDic } from "@/api/manage/station";
|
||||
import { mapGetters } from "vuex";
|
||||
import { isMobile, check18IdCardNo, validatenull } from "@/util/validate";
|
||||
import { putFile } from "@/api/resource/oss";
|
||||
|
||||
const accept = [
|
||||
"image/png",
|
||||
"image/jpeg",
|
||||
"image/svg+xml",
|
||||
"image/gif",
|
||||
"image/x-photoshop",
|
||||
];
|
||||
|
||||
function getPath(path) {
|
||||
const arr = path.split(',');
|
||||
return arr[arr.length - 1];
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "manage_station_mainList",
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
query: {},
|
||||
loading: true,
|
||||
page: {
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
},
|
||||
checkDrawer: false,
|
||||
option: {
|
||||
height: "auto",
|
||||
tip: false,
|
||||
searchShow: true,
|
||||
searchMenuSpan: 6,
|
||||
border: true,
|
||||
index: true,
|
||||
indexLabel: "序号",
|
||||
viewBtn: true,
|
||||
delBtn: false,
|
||||
menuWidth: 250,
|
||||
labelWidth: 151,
|
||||
dialogClickModal: false,
|
||||
dialogType: "drawer",
|
||||
dialogFullscreen: true,
|
||||
column: [
|
||||
{
|
||||
label: "公司名称",
|
||||
prop: "companyName",
|
||||
search: true,
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: "联系人",
|
||||
prop: "manager",
|
||||
search: false,
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: "手机号码",
|
||||
prop: "telphone",
|
||||
display: false,
|
||||
},
|
||||
// {
|
||||
// label: "结算比例",
|
||||
// prop: "percent",
|
||||
// display: false,
|
||||
// },
|
||||
],
|
||||
group: [
|
||||
{
|
||||
label: "",
|
||||
column: [
|
||||
{
|
||||
type: "input",
|
||||
label: "统一信用代码",
|
||||
span: 12,
|
||||
display: true,
|
||||
size: "small",
|
||||
prop: "companyTid",
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
whitespace: true,
|
||||
message: "请输入统一信用代码",
|
||||
},
|
||||
{
|
||||
message: "请输入正确的统一信用代码",
|
||||
min: 18,
|
||||
max: 18,
|
||||
},
|
||||
],
|
||||
placeholder: "18位统一社会信用代码",
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
label: "企业名称",
|
||||
span: 12,
|
||||
display: true,
|
||||
size: "small",
|
||||
prop: "companyName",
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
whitespace: true,
|
||||
message: "请输入企业名称",
|
||||
},
|
||||
],
|
||||
},
|
||||
// {
|
||||
// type: "number",
|
||||
// label: "结算比例",
|
||||
// span: 12,
|
||||
// size: "small",
|
||||
// prop: "percent",
|
||||
// rules: [
|
||||
// {
|
||||
// required: true,
|
||||
// message: "请输入结算比例",
|
||||
// },
|
||||
// { type: "number", message: "结算比例为数字值" },
|
||||
// ],
|
||||
// minRows: 0,
|
||||
// maxRows: 1,
|
||||
// precision: 2,
|
||||
// },
|
||||
{
|
||||
type: "input",
|
||||
label: "法人姓名",
|
||||
span: 12,
|
||||
display: true,
|
||||
size: "small",
|
||||
prop: "masterName",
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
whitespace: true,
|
||||
message: "请输入法人姓名",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
label: "法人身份证号",
|
||||
span: 12,
|
||||
display: true,
|
||||
size: "small",
|
||||
prop: "masterIdentity",
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入身份证号",
|
||||
},
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (check18IdCardNo(value)) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error("身份证格式不正确"));
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
label: "所在地区",
|
||||
prop: "cityId",
|
||||
span: 12,
|
||||
display: true,
|
||||
formslot: true,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择所在地区",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
label: "详细地址",
|
||||
span: 12,
|
||||
display: true,
|
||||
size: "small",
|
||||
prop: "companyAddress",
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
whitespace: true,
|
||||
message: "请输入详细地址",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
label: "联系人",
|
||||
span: 12,
|
||||
display: true,
|
||||
size: "small",
|
||||
prop: "manager",
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
whitespace: true,
|
||||
message: "请输入联系人",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
label: "手机号码",
|
||||
span: 12,
|
||||
display: true,
|
||||
size: "small",
|
||||
prop: "telphone",
|
||||
rules: [
|
||||
{
|
||||
required:true,
|
||||
validator: (rule, value, callback) => {
|
||||
if (validatenull(value)) {
|
||||
callback(new Error("请输入手机号码"));
|
||||
} else if (isMobile(value)) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error("手机号码不正确"));
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "upload",
|
||||
label: "法人身份证（人像）",
|
||||
span: 12,
|
||||
showFileList: false,
|
||||
listType: "picture-img",
|
||||
multiple: false,
|
||||
propsHttp: {
|
||||
res: "data",
|
||||
url: "link",
|
||||
},
|
||||
canvasOption: {},
|
||||
headers: [],
|
||||
data: [],
|
||||
accept,
|
||||
size: "small",
|
||||
prop: "identityUrl4Id",
|
||||
action: putFile,
|
||||
viewDisplay: false,
|
||||
},
|
||||
{
|
||||
type: "upload",
|
||||
label: "法人身份证（国徽）",
|
||||
span: 12,
|
||||
showFileList: false,
|
||||
listType: "picture-img",
|
||||
multiple: false,
|
||||
propsHttp: {
|
||||
res: "data",
|
||||
url: "link",
|
||||
},
|
||||
canvasOption: {},
|
||||
headers: [],
|
||||
data: [],
|
||||
accept,
|
||||
size: "small",
|
||||
prop: "identityUrl5Id",
|
||||
action: putFile,
|
||||
viewDisplay: false,
|
||||
},
|
||||
{
|
||||
type: "upload",
|
||||
label: "营业执照",
|
||||
span: 12,
|
||||
showFileList: false,
|
||||
listType: "picture-img",
|
||||
multiple: false,
|
||||
propsHttp: {
|
||||
res: "data",
|
||||
url: "link",
|
||||
},
|
||||
accept,
|
||||
canvasOption: {},
|
||||
headers: [],
|
||||
data: [],
|
||||
size: "small",
|
||||
prop: "authUrlId",
|
||||
action: putFile,
|
||||
viewDisplay: false,
|
||||
},
|
||||
// 图片预览
|
||||
{
|
||||
label: "法人身份证（人像）",
|
||||
span: 12,
|
||||
prop: "identityUrl4IdImg",
|
||||
formslot: true,
|
||||
editDisplay: false,
|
||||
addDisplay: false,
|
||||
viewDisplay: true,
|
||||
},
|
||||
{
|
||||
label: "法人身份证（国徽）",
|
||||
span: 12,
|
||||
prop: "identityUrl5IdImg",
|
||||
formslot: true,
|
||||
editDisplay: false,
|
||||
addDisplay: false,
|
||||
viewDisplay: true,
|
||||
},
|
||||
{
|
||||
label: "营业执照照片",
|
||||
span: 12,
|
||||
prop: "authUrlIdImg",
|
||||
formslot: true,
|
||||
editDisplay: false,
|
||||
addDisplay: false,
|
||||
viewDisplay: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
data: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["userInfo", "permission"]),
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.vaildData(
|
||||
this.permission.manage_station_mainList_add,
|
||||
false
|
||||
),
|
||||
viewBtn: this.vaildData(
|
||||
this.permission.manage_station_mainList_view,
|
||||
false
|
||||
),
|
||||
editBtn: this.vaildData(
|
||||
this.permission.manage_station_mainList_edit,
|
||||
false
|
||||
),
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
rowSave(row, done, loading) {
|
||||
console.log('rowSave')
|
||||
row.authUrlId = getPath(row.authUrlId)
|
||||
row.identityUrl4Id = getPath(row.identityUrl4Id)
|
||||
row.identityUrl5Id = getPath(row.identityUrl5Id)
|
||||
companyInfoAdd({
|
||||
authUrlId: row.authUrlId,
|
||||
cityId: row.cityId,
|
||||
companyAddress: row.companyAddress,
|
||||
companyName: row.companyName,
|
||||
companyTid: row.companyTid,
|
||||
identityUrl4Id: row.identityUrl4Id,
|
||||
identityUrl5Id: row.identityUrl5Id,
|
||||
manager: row.manager,
|
||||
masterIdentity: row.masterIdentity,
|
||||
masterName: row.masterName,
|
||||
percent: row.percent,
|
||||
stationId: row.stationId,
|
||||
telphone: row.telphone,
|
||||
}).then(
|
||||
() => {
|
||||
this.onLoad(this.page, this.params);
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "操作成功!",
|
||||
});
|
||||
// 数据回调进行刷新
|
||||
done(row);
|
||||
},
|
||||
() => {
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
console.log('rowUpdate')
|
||||
row.authUrlId = getPath(row.authUrlId)
|
||||
row.identityUrl4Id = getPath(row.identityUrl4Id)
|
||||
row.identityUrl5Id = getPath(row.identityUrl5Id)
|
||||
companyUpdate({
|
||||
id: row.id,
|
||||
authUrlId: row.authUrlId,
|
||||
cityId: row.cityId,
|
||||
companyAddress: row.companyAddress,
|
||||
companyName: row.companyName,
|
||||
companyTid: row.companyTid,
|
||||
identityUrl4Id: row.identityUrl4Id,
|
||||
identityUrl5Id: row.identityUrl5Id,
|
||||
manager: row.manager,
|
||||
masterIdentity: row.masterIdentity,
|
||||
masterName: row.masterName,
|
||||
percent: row.percent,
|
||||
stationId: row.stationId,
|
||||
telphone: row.telphone,
|
||||
authType: 2
|
||||
}).then(
|
||||
() => {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "操作成功!",
|
||||
});
|
||||
// 数据回调进行刷新
|
||||
done(row);
|
||||
},
|
||||
() => {
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
beforeOpen(done, type) {
|
||||
if (["add", "edit"].includes(type)) {
|
||||
this.initData();
|
||||
done();
|
||||
}
|
||||
if (["edit", "view"].includes(type)) {
|
||||
this.loading = true;
|
||||
var params = {
|
||||
id: this.form.id,
|
||||
authType: 2
|
||||
}
|
||||
companyDetail(params).then((res) => {
|
||||
this.loading = false;
|
||||
this.form = res.data.data;
|
||||
done();
|
||||
});
|
||||
}
|
||||
},
|
||||
beforeClose(done) {
|
||||
done();
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
companyStationInfo(
|
||||
page.currentPage,
|
||||
page.pageSize,
|
||||
Object.assign(this.query, params)
|
||||
).then((res) => {
|
||||
const data = res.data.data;
|
||||
this.page.total = data.total;
|
||||
this.data = data.records;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
stop(row) {
|
||||
let h = this.$createElement;
|
||||
this.$confirm(
|
||||
h("p", { style: "color: #F56C6C" }, "一旦终止结算将会终止"),
|
||||
"您确定要终止与此公司的合作吗？",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
center: true,
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
this.loading = true;
|
||||
var params = {
|
||||
companyId: row.id,
|
||||
flag: 0,
|
||||
authType: 2
|
||||
}
|
||||
stationStop(params)
|
||||
.then(() => {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "操作成功!",
|
||||
});
|
||||
this.loading = false;
|
||||
this.onLoad(this.page, this.params);
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
})
|
||||
.catch();
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user