案件录入页面优化 #13

Merged
hhlxayunmei merged 3 commits from hhl into dev 2023-09-08 10:51:45 +00:00
2 changed files with 214 additions and 133 deletions
+44 -24
View File
@@ -49,11 +49,7 @@
>
</el-col>
</el-row>
<el-table
v-loading="loading"
:data="list.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
style="width: 100%"
>
<el-table v-loading="loading" :data="batchList" style="width: 100%">
<el-table-column label="序号" type="index" align="center">
<template slot-scope="scope">
<span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
@@ -78,7 +74,7 @@
prop="filingDate"
: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="操作"
@@ -102,6 +98,14 @@
v-hasPermi="['monitor:online:forceLogout']"
>详情</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="deleteRow(scope.row)"
v-hasPermi="['monitor:online:forceLogout']"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
@@ -127,7 +131,9 @@
</el-form-item>
</el-col>
<el-col :span="8">
<el-button type="primary" @click="downloadTemplate">下载模板</el-button>
<el-button type="primary" @click="downloadTemplate"
>下载模板</el-button
>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="立案申请书:" prop="applybook"> </el-form-item>
@@ -174,7 +180,7 @@ export default {
// 总条数
total: 0,
// 表格数据
list: [],
batchList: [],
pageNum: 1,
pageSize: 10,
// 查询参数
@@ -207,16 +213,7 @@ export default {
},
starttime: "", //开始时间
endtime: "", //结束时间
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",
// },
],
fileList: [],
};
},
created() {
@@ -226,11 +223,22 @@ export default {
/** 查询登录日志列表 */
getList() {
this.loading = true;
list(this.queryParams).then((response) => {
this.list = response.rows;
this.total = response.total;
this.loading = false;
});
this.batchList = [
{
id: 1,
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() {
@@ -257,9 +265,21 @@ export default {
editRow() {},
// 详情
detailRow() {},
// 删除
deleteRow(row) {
// const id = row.id;
this.$modal
.confirm("是否确认删除?")
.then()
.then(() => {
// this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
// 下载模板
downloadTemplate() {
console.log('下载模板');
console.log("下载模板");
},
handleRemove(file, fileList) {
console.log(file, fileList);
+169 -108
View File
@@ -49,11 +49,7 @@
>
</el-col>
</el-row>
<el-table
v-loading="loading"
:data="list.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
style="width: 100%"
>
<el-table v-loading="loading" :data="dataList" style="width: 100%">
<el-table-column label="序号" type="index" align="center">
<template slot-scope="scope">
<span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
@@ -78,7 +74,7 @@
prop="filingDate"
: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="操作"
@@ -102,6 +98,14 @@
v-hasPermi="['monitor:online:forceLogout']"
>详情</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="deleteRow(scope.row)"
v-hasPermi="['monitor:online:forceLogout']"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
@@ -269,72 +273,96 @@
</el-row>
</el-form>
<el-form ref="form2" :model="form2" :rules="rules" label-width="150px">
<p>主体信息:</p>
<hr />
<el-row>
<el-col :span="12">
<el-form-item label="主体身份类型:" prop="PaymentNotice">
<el-input v-model="form.PaymentNotice" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="申请人:" prop="PaymentNotice">
<el-input v-model="form.PaymentNotice" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="身份证号:" prop="PaymentNotice">
<el-input v-model="form.PaymentNotice" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话:" prop="PaymentNotice">
<el-input v-model="form.PaymentNotice" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="单位地址:" prop="PaymentNotice">
<el-input v-model="form.PaymentNotice" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="单位电话:" prop="PaymentNotice">
<el-input v-model="form.PaymentNotice" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系地址:" prop="PaymentNotice">
<el-input v-model="form.PaymentNotice" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
<p>代理人信息:</p>
<el-row>
<el-col :span="12">
<el-form-item label="姓名:" prop="name">
<el-input v-model="form.name" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="身份证号:" prop="name">
<el-input v-model="form.name" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话:" prop="name">
<el-input v-model="form.name" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系地址:" prop="name">
<el-input v-model="form.name" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
<el-button @click="generateForm()">新增主体信息</el-button>
<div id="formContainer"></div>
<div v-for="(item, index) in paymentArr" :key="index">
<div style="display:flex;justify-content: space-between;">
<p>主体信息:</p><el-button type="danger" icon="el-icon-delete" @click="deleteData(index)" v-if="paymentArr.length>1"></el-button>
</div>
<hr />
<el-row>
<el-col :span="12">
<el-form-item label="主体身份类型:" :prop="paymentArr.identityType">
<el-input
v-model="item.identityType"
placeholder="请输入"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="申请人:" :prop="paymentArr.applicant">
<el-input v-model="item.applicant" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="身份证号:" :prop="paymentArr.IDnumber">
<el-input v-model="item.IDnumber" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话:" :prop="paymentArr.phoneNumber">
<el-input
v-model="item.phoneNumber"
placeholder="请输入"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="单位地址:" :prop="paymentArr.unitAddress">
<el-input
v-model="item.unitAddress"
placeholder="请输入"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="单位电话:" :prop="paymentArr.worktelephone">
<el-input
v-model="item.worktelephone"
placeholder="请输入"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系地址:" :prop="paymentArr.contactAddress">
<el-input
v-model="item.contactAddress"
placeholder="请输入"
/>
</el-form-item>
</el-col>
</el-row>
<p>代理人信息:</p>
<el-row>
<el-col :span="12">
<el-form-item label="姓名:" :prop="paymentArr.agentName">
<el-input v-model="item.agentName" placeholder="请输入" />
</el-form-item>
</el-col>
<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-button type="primary" plain @click="generateForm()">新增主体信息</el-button>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
@@ -354,7 +382,7 @@ export default {
// 总条数
total: 0,
// 表格数据
list: [],
dataList: [],
pageNum: 1,
pageSize: 10,
// 查询参数
@@ -389,47 +417,60 @@ export default {
starttime: "", //开始时间
endtime: "", //结束时间
fileList: [],
paymentArr: [],
paymentArr: [
{
identityType: "",
applicant: "",
IDnumber: "",
phoneNumber: "",
unitAddress: "",
worktelephone: "",
contactAddress: "",
agentName: "",
agentPhone: "",
agentAddress: "",
},
],
};
},
created() {
this.getList();
},
methods: {
// 新增主体信息
generateForm() {
// var formContainer = document.getElementById("formContainer");
// var form = document.createElement("form2");
// form.setAttribute("method", "post");
// form.setAttribute("action", "#");
// var inputField = document.createElement("input");
// inputField.setAttribute("type", "text");
// inputField.setAttribute("name", "username");
// inputField.setAttribute("placeholder", "用户名");
// var passwordField = document.createElement("input");
// 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);
this.paymentArr.push({
identityType: "",
applicant: "",
IDnumber: "",
phoneNumber: "",
unitAddress: "",
worktelephone: "",
contactAddress: "",
agentName: "",
agentPhone: "",
agentAddress: "",
});
},
/** 查询登录日志列表 */
getList() {
this.loading = true;
list(this.queryParams).then((response) => {
this.list = response.rows;
this.total = response.total;
this.loading = false;
});
this.dataList = [
{
id: 1,
caseNumber: "5644456",
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() {
@@ -453,9 +494,27 @@ export default {
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) {
console.log(file, fileList);
},
@@ -472,8 +531,10 @@ export default {
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}?`);
},
// 删除主体信息
deleteData(index) {
this.paymentArr.splice(index,1)
}
},
};
</script>
@@ -483,7 +544,7 @@ export default {
height: 700px !important;
overflow: auto !important;
}
#formContainer{
#formContainer {
}
</style>