案件录入页面优化

This commit is contained in:
Your Name
2023-09-08 18:50:34 +08:00
parent e1f9d19603
commit a38d7cd3b3
2 changed files with 214 additions and 133 deletions
+44 -24
View File
@@ -49,11 +49,7 @@
> >
</el-col> </el-col>
</el-row> </el-row>
<el-table <el-table v-loading="loading" :data="batchList" style="width: 100%">
v-loading="loading"
:data="list.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
style="width: 100%"
>
<el-table-column label="序号" type="index" align="center"> <el-table-column label="序号" type="index" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span> <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
@@ -78,7 +74,7 @@
prop="filingDate" prop="filingDate"
:show-overflow-tooltip="true" :show-overflow-tooltip="true"
/> />
<el-table-column label="仲裁方式" align="center" prop="ArbitrateMethod" /> <!-- <el-table-column label="仲裁方式" align="center" prop="ArbitrateMethod" /> -->
<el-table-column label="案件状态" align="center" prop="caseStatus" /> <el-table-column label="案件状态" align="center" prop="caseStatus" />
<el-table-column <el-table-column
label="操作" label="操作"
@@ -102,6 +98,14 @@
v-hasPermi="['monitor:online:forceLogout']" v-hasPermi="['monitor:online:forceLogout']"
>详情</el-button >详情</el-button
> >
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="deleteRow(scope.row)"
v-hasPermi="['monitor:online:forceLogout']"
>删除</el-button
>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@@ -127,7 +131,9 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-button type="primary" @click="downloadTemplate">下载模板</el-button> <el-button type="primary" @click="downloadTemplate"
>下载模板</el-button
>
</el-col> </el-col>
<!-- <el-col :span="12"> <!-- <el-col :span="12">
<el-form-item label="立案申请书:" prop="applybook"> </el-form-item> <el-form-item label="立案申请书:" prop="applybook"> </el-form-item>
@@ -174,7 +180,7 @@ export default {
// 总条数 // 总条数
total: 0, total: 0,
// 表格数据 // 表格数据
list: [], batchList: [],
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
// 查询参数 // 查询参数
@@ -207,16 +213,7 @@ export default {
}, },
starttime: "", //开始时间 starttime: "", //开始时间
endtime: "", //结束时间 endtime: "", //结束时间
fileList: [ fileList: [],
// {
// name: "food.jpeg",
// url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
// },
// {
// name: "food2.jpeg",
// url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
// },
],
}; };
}, },
created() { created() {
@@ -226,11 +223,22 @@ export default {
/** 查询登录日志列表 */ /** 查询登录日志列表 */
getList() { getList() {
this.loading = true; this.loading = true;
list(this.queryParams).then((response) => { this.batchList = [
this.list = response.rows; {
this.total = response.total; id: 1,
this.loading = false; caseNumber: "5644456",
}); applicant: "韩某某",
matterofCase: "5000",
filingDate: "2023-9-3",
// ArbitrateMethod: '线上',
caseStatus: "未开庭",
},
];
// list(this.queryParams).then((response) => {
// this.list = response.rows;
// this.total = response.total;
this.loading = false;
// });
}, },
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { handleQuery() {
@@ -257,9 +265,21 @@ export default {
editRow() {}, editRow() {},
// 详情 // 详情
detailRow() {}, detailRow() {},
// 删除
deleteRow(row) {
// const id = row.id;
this.$modal
.confirm("是否确认删除?")
.then()
.then(() => {
// this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
// 下载模板 // 下载模板
downloadTemplate() { downloadTemplate() {
console.log('下载模板'); console.log("下载模板");
}, },
handleRemove(file, fileList) { handleRemove(file, fileList) {
console.log(file, fileList); console.log(file, fileList);
+170 -109
View File
@@ -49,11 +49,7 @@
> >
</el-col> </el-col>
</el-row> </el-row>
<el-table <el-table v-loading="loading" :data="dataList" style="width: 100%">
v-loading="loading"
:data="list.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
style="width: 100%"
>
<el-table-column label="序号" type="index" align="center"> <el-table-column label="序号" type="index" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span> <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
@@ -78,7 +74,7 @@
prop="filingDate" prop="filingDate"
:show-overflow-tooltip="true" :show-overflow-tooltip="true"
/> />
<el-table-column label="仲裁方式" align="center" prop="ArbitrateMethod" /> <!-- <el-table-column label="仲裁方式" align="center" prop="ArbitrateMethod" /> -->
<el-table-column label="案件状态" align="center" prop="caseStatus" /> <el-table-column label="案件状态" align="center" prop="caseStatus" />
<el-table-column <el-table-column
label="操作" label="操作"
@@ -102,6 +98,14 @@
v-hasPermi="['monitor:online:forceLogout']" v-hasPermi="['monitor:online:forceLogout']"
>详情</el-button >详情</el-button
> >
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="deleteRow(scope.row)"
v-hasPermi="['monitor:online:forceLogout']"
>删除</el-button
>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@@ -269,72 +273,96 @@
</el-row> </el-row>
</el-form> </el-form>
<el-form ref="form2" :model="form2" :rules="rules" label-width="150px"> <el-form ref="form2" :model="form2" :rules="rules" label-width="150px">
<p>主体信息:</p> <div v-for="(item, index) in paymentArr" :key="index">
<hr /> <div style="display:flex;justify-content: space-between;">
<el-row> <p>主体信息:</p><el-button type="danger" icon="el-icon-delete" @click="deleteData(index)" v-if="paymentArr.length>1"></el-button>
<el-col :span="12"> </div>
<el-form-item label="主体身份类型:" prop="PaymentNotice"> <hr />
<el-input v-model="form.PaymentNotice" placeholder="请输入" /> <el-row>
</el-form-item> <el-col :span="12">
</el-col> <el-form-item label="主体身份类型:" :prop="paymentArr.identityType">
<el-col :span="12"> <el-input
<el-form-item label="申请人:" prop="PaymentNotice"> v-model="item.identityType"
<el-input v-model="form.PaymentNotice" placeholder="请输入" /> placeholder="请输入"
</el-form-item> />
</el-col> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="身份证号:" prop="PaymentNotice"> <el-col :span="12">
<el-input v-model="form.PaymentNotice" placeholder="请输入" /> <el-form-item label="申请人:" :prop="paymentArr.applicant">
</el-form-item> <el-input v-model="item.applicant" placeholder="请输入" />
</el-col> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="联系电话:" prop="PaymentNotice"> <el-col :span="12">
<el-input v-model="form.PaymentNotice" placeholder="请输入" /> <el-form-item label="身份证号:" :prop="paymentArr.IDnumber">
</el-form-item> <el-input v-model="item.IDnumber" placeholder="请输入" />
</el-col> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="单位地址:" prop="PaymentNotice"> <el-col :span="12">
<el-input v-model="form.PaymentNotice" placeholder="请输入" /> <el-form-item label="联系电话:" :prop="paymentArr.phoneNumber">
</el-form-item> <el-input
</el-col> v-model="item.phoneNumber"
<el-col :span="12"> placeholder="请输入"
<el-form-item label="单位电话:" prop="PaymentNotice"> />
<el-input v-model="form.PaymentNotice" placeholder="请输入" /> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col :span="12">
<el-col :span="12"> <el-form-item label="单位地址:" :prop="paymentArr.unitAddress">
<el-form-item label="联系地址:" prop="PaymentNotice"> <el-input
<el-input v-model="form.PaymentNotice" placeholder="请输入" /> v-model="item.unitAddress"
</el-form-item> placeholder="请输入"
</el-col> />
</el-row> </el-form-item>
<p>代理人信息:</p> </el-col>
<el-row> <el-col :span="12">
<el-col :span="12"> <el-form-item label="单位电话:" :prop="paymentArr.worktelephone">
<el-form-item label="姓名:" prop="name"> <el-input
<el-input v-model="form.name" placeholder="请输入" /> v-model="item.worktelephone"
</el-form-item> placeholder="请输入"
</el-col> />
<el-col :span="12"> </el-form-item>
<el-form-item label="身份证号:" prop="name"> </el-col>
<el-input v-model="form.name" placeholder="请输入" /> <el-col :span="12">
</el-form-item> <el-form-item label="联系地址:" :prop="paymentArr.contactAddress">
</el-col> <el-input
<el-col :span="12"> v-model="item.contactAddress"
<el-form-item label="联系电话:" prop="name"> placeholder="请输入"
<el-input v-model="form.name" placeholder="请输入" /> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> </el-row>
<el-form-item label="联系地址:" prop="name"> <p>代理人信息:</p>
<el-input v-model="form.name" placeholder="请输入" /> <el-row>
</el-form-item> <el-col :span="12">
</el-col> <el-form-item label="姓名:" :prop="paymentArr.agentName">
</el-row> <el-input v-model="item.agentName" placeholder="请输入" />
<el-button @click="generateForm()">新增主体信息</el-button> </el-form-item>
</el-col>
<div id="formContainer"></div> <el-col :span="12">
<el-form-item label="身份证号:" :prop="paymentArr.agentNum">
<el-input v-model="item.agentNum" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话:" :prop="paymentArr.agentPhone">
<el-input
v-model="item.agentPhone"
placeholder="请输入"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系地址:" :prop="paymentArr.agentAddress">
<el-input
v-model="item.agentAddress"
placeholder="请输入"
/>
</el-form-item>
</el-col>
</el-row>
</div>
<!-- <div id="formContainer"></div> -->
</el-form> </el-form>
<el-button type="primary" plain @click="generateForm()">新增主体信息</el-button>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button> <el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button> <el-button @click="cancel">取 消</el-button>
@@ -354,7 +382,7 @@ export default {
// 总条数 // 总条数
total: 0, total: 0,
// 表格数据 // 表格数据
list: [], dataList: [],
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
// 查询参数 // 查询参数
@@ -389,47 +417,60 @@ export default {
starttime: "", //开始时间 starttime: "", //开始时间
endtime: "", //结束时间 endtime: "", //结束时间
fileList: [], fileList: [],
paymentArr: [], paymentArr: [
{
identityType: "",
applicant: "",
IDnumber: "",
phoneNumber: "",
unitAddress: "",
worktelephone: "",
contactAddress: "",
agentName: "",
agentPhone: "",
agentAddress: "",
},
],
}; };
}, },
created() { created() {
this.getList(); this.getList();
}, },
methods: { methods: {
// 新增主体信息
generateForm() { generateForm() {
// var formContainer = document.getElementById("formContainer"); this.paymentArr.push({
// var form = document.createElement("form2"); identityType: "",
// form.setAttribute("method", "post"); applicant: "",
// form.setAttribute("action", "#"); IDnumber: "",
phoneNumber: "",
// var inputField = document.createElement("input"); unitAddress: "",
// inputField.setAttribute("type", "text"); worktelephone: "",
// inputField.setAttribute("name", "username"); contactAddress: "",
// inputField.setAttribute("placeholder", "用户名"); agentName: "",
agentPhone: "",
// var passwordField = document.createElement("input"); agentAddress: "",
// passwordField.setAttribute("type", "password"); });
// passwordField.setAttribute("name", "password");
// passwordField.setAttribute("placeholder", "密码");
// var submitButton = document.createElement("input");
// submitButton.setAttribute("type", "submit");
// submitButton.setAttribute("value", "提交");
// form.appendChild(inputField);
// form.appendChild(passwordField);
// form.appendChild(submitButton);
// formContainer.appendChild(form);
}, },
/** 查询登录日志列表 */ /** 查询登录日志列表 */
getList() { getList() {
this.loading = true; this.dataList = [
list(this.queryParams).then((response) => { {
this.list = response.rows; id: 1,
this.total = response.total; caseNumber: "5644456",
this.loading = false; applicant: "韩某某",
}); matterofCase: "5000",
filingDate: "2023-9-3",
// ArbitrateMethod: '线上',
caseStatus: "未开庭",
},
];
// this.loading = true;
// list(this.queryParams).then((response) => {
// this.list = response.rows;
// this.total = response.total;
this.loading = false;
// });
}, },
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { handleQuery() {
@@ -453,9 +494,27 @@ export default {
this.openapply = false; this.openapply = false;
}, },
// 修改 // 修改
editRow() {}, editRow(row) {
this.openapply = true;
this.dialogtitle = "立案修改";
},
// 详情 // 详情
detailRow() {}, detailRow(row) {
this.openapply = true;
this.dialogtitle = "立案详情";
},
// 删除
deleteRow(row) {
// const id = row.id;
this.$modal
.confirm("是否确认删除?")
.then()
.then(() => {
// this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
handleRemove(file, fileList) { handleRemove(file, fileList) {
console.log(file, fileList); console.log(file, fileList);
}, },
@@ -472,8 +531,10 @@ export default {
beforeRemove(file, fileList) { beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}?`); return this.$confirm(`确定移除 ${file.name}?`);
}, },
// 删除主体信息
deleteData(index) {
this.paymentArr.splice(index,1)
}
}, },
}; };
</script> </script>
@@ -483,7 +544,7 @@ export default {
height: 700px !important; height: 700px !important;
overflow: auto !important; overflow: auto !important;
} }
#formContainer{ #formContainer {
} }
</style> </style>