JIALDemo/target/classes/backend/page/hearCase/add.html

637 lines
31 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="../../plugins/element-ui/index.css" />
<link rel="stylesheet" href="../../styles/common.css" />
<link rel="stylesheet" href="../../styles/page.css" />
<link rel="stylesheet" href="../../styles/hearCaseAdd.css" />
</head>
<body>
<div class="addBrand-container" id="hearCase-add-app">
<div class="container">
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" :inline="true" label-width="180px">
<div>
<el-form-item label="案件号:" prop="caseNum">
<el-input v-model="ruleForm.caseNum" placeholder="请填写案件号" maxlength="20" />
</el-form-item>
<el-form-item label="案件类别:" prop="caseType" class="requiredField">
<el-select v-model="ruleForm.caseType" placeholder="请选择案件类别">
<el-option v-for="item in caseTypeList" :key="item.id" :label="item.name"
:value="item.id" />
</el-select>
</el-form-item>
</div>
<div>
<el-form-item label="法院名称:" prop="court" class="requiredField">
<el-input v-model="ruleForm.court" placeholder="请填写法院名称:" maxlength="20" />
</el-form-item>
<el-form-item label="案件状态:" prop="caseStatus" class="requiredField">
<el-select v-model="ruleForm.caseStatusList" placeholder="请选择案件状态">
<el-option v-for="item in caseStatusList" :key="item.id" :label="item.name"
:value="item.id" />
</el-select>
</el-form-item>
</div>
<div>
<el-form-item label="法官姓名:" prop="judgeName">
<el-input v-model="ruleForm.judgeName" placeholder="请填写法官姓名:" maxlength="20" />
</el-form-item>
<el-form-item label="法官联系方式:" prop="judgePhone">
<el-input v-model="ruleForm.judgePhone" placeholder="请填写法官联系方式:" maxlength="20" />
</el-form-item>
</div>
<div>
<el-form-item label="原告信息:" class="requiredField">
<el-form-item>
<div class="addTable" ref="plaintiffTable">
<span v-if="plaintiffTable.length == 0" class="addBut" @click="openAddPlaintiff"> +
添加原告</span>
<div v-if="plaintiffTable.length != 0" class="content">
<div class="addBut" style="margin-bottom: 20px" @click="openAddPlaintiff">+ 添加原告</div>
<div class="table">
<el-table :data="plaintiffTable" style="width:100%">
<el-table-column prop="unitName" label="单位名称" width="180" align="center"></el-table-column>
<el-table-column prop="unitLocation" label="单位所在地" width="180"
align="center">
</el-table-column>
<el-table-column prop="licenseNum" label="证件号码" width="180" align="center">
</el-table-column>
<el-table-column prop="address" label="操作" width="180px" align="center">
<template slot-scope="scope">
<el-button type="text" size="small"
@click="delPlaintiffHandle(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</el-form-item>
</el-form-item>
</div>
<div>
<el-form-item label="被告信息:" class="requiredField">
<el-form-item>
<div class="addTable">
<span v-if="defendantTable.length == 0" class="addBut" @click="openAddDefendant">
+ 添加被告</span>
<div v-if="defendantTable.length !== 0" class="content">
<div class="addBut" style="margin-bottom: 20px" @click="openAddDefendant">+ 添加被告
</div>
<div class="table">
<el-table :data="defendantTable" style="width:100%">
<el-table-column prop="unitName" label="单位名称" width="180" align="center">
</el-table-column>
<el-table-column prop="unitLocation" label="单位所在地" width="180"
align="center"></el-table-column>
<el-table-column prop="licenseNum" label="证件号码" width="180" align="center">
</el-table-column>
<el-table-column prop="address" label="操作" width="180px" align="center">
<template slot-scope="scope">
<el-button type="text" size="small"
@click="delDefendantHandle(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</el-form-item>
</el-form-item>
</div>
<div>
<el-form-item label="附件信息:" class="requiredField">
<el-form-item>
<div class="addTable">
<span v-if="attachmentTable.length == 0" class="addBut" @click="openAddAttachment">
+ 添加附件</span>
<div v-if="attachmentTable.length !== 0" class="content">
<div class="addBut" style="margin-bottom: 20px" @click="openAddAttachment">+ 添加附件
</div>
<div class="table">
<el-table :data="attachmentTable" style="width:100%">
<el-table-column prop="unitName" label="附件类型" width="180" align="center">
</el-table-column>
<el-table-column prop="unitLocation" label="附件" width="180" align="center">
</el-table-column>
<el-table-column prop="address" label="操作" width="180px" align="center">
<template slot-scope="scope">
<el-button type="text" size="small"
@click="delAttachmentHandle(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</el-form-item>
</el-form-item>
</div>
<div>
<el-form-item label="金额信息:">
<el-form-item>
<div class="addDynamicBox">
<span v-if="amountInfo.length == 0" class="addBut" @click="addAmountInfo"> + 添加金额</span>
<div v-if="amountInfo.length != 0" class="dynamicBoxList">
<div class="title">
<span>金额类型,并输入金额信息</span>
</div>
<div class="cont">
<div v-for="(item, index) in amountInfo" :key="index" class="items">
<div class="itTit">
<div class="selectInput">
<div>
<el-input v-model="item.name" type="text" style="width: 100%"
placeholder="选择金额类别" @focus="selectAmountType(true,index)"
@blur="outSelectAmountType(false,index)"
@input="inputAmountTypeHandle(index)" />
</div>
<div v-show="item.showOption" class="flavorSelect">
<span v-for="(it, ind) in amountTypeData" :key="ind"
class="items"
@click="checkAmountTypeOption(it,ind,index)">
{{ it.name}}</span>
<span v-if="amountTypeData == []" class="none">无数据</span>
</div>
</div>
</div>
<div style="display: flex">
<span>
<el-input v-model="amountNumber" placeholder="请填写金额数目"
style="width: 190px; padding-right: 10px" maxlength="20" />
</span>
<span>
<el-input style="width: 310px" v-model="amountDescription " placeholder="请填写金额备注" />
</span>
</div>
<span class="delFlavor delBut non" @click="delAmountInfo(index)">删除</span>
</div>
</div>
<div class="addBut" @click="addAmountInfo">
添加金额
</div>
</div>
</div>
</el-form-item>
</el-form-item>
</div>
<div class="subBox address">
<el-form-item>
<el-button @click="goBack()">
取消
</el-button>
<el-button
type="primary"
@click="submitForm('ruleForm', false)"
>
保存
</el-button>
<el-button
v-if="actionType == 'add'"
type="primary"
class="continue"
@click="submitForm('ruleForm', true)"
>
保存并继续添加
</el-button>
</el-form-item>
</div>
<el-dialog ref="plaintiffDialog" :visible.sync="dialogVisiblePlaintiff"
:before-close="handleClosePlaintiff" title="添加原告信息">
<div>
<el-form-item label="原告类型:" prop="plaintiffDialog.type" >
<el-select v-model="plaintiffDialog.type" placeholder="请选择原告类型">
<el-option v-for="item in plaintiffDialog.typeList" :key="item.id" :label="item.name"
:value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="单位名称:" prop="plaintiffDialog.unitName" >
<el-input v-model="plaintiffDialog.unitName" placeholder="请填写单位名称" maxlength="20" />
</el-form-item>
</div>
<div>
<el-form-item label="证件类型:" prop="plaintiffDialog.licenseType">
<el-select v-model="plaintiffDialog.licenseType" placeholder="请选择证件类别">
<el-option v-for="item in plaintiffDialog.licenseTypeList" :key="item.id" :label="item.name"
:value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="证件号:" prop="plaintiffDialog.licenseNum">
<el-input v-model="plaintiffDialog.licenseNum" placeholder="请填写证件号" maxlength="30" />
</el-form-item>
</div>
<div>
<el-form-item label="单位所在地:" prop="plaintiffDialog.unitLocation">
<el-input v-model="plaintiffDialog.unitLocation" placeholder="请填写单位所在地" maxlength="30" />
</el-form-item>
<el-form-item label="联系电话:" prop="plaintiffDialog.phoneNum">
<el-input v-model="plaintiffDialog.phoneNum" placeholder="请填写联系电话" maxlength="30" />
</el-form-item>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClosePlaintiff">取消</el-button>
<el-button type="primary" @click="addPlaintiffTableList">确定</el-button>
</span>
</el-dialog>
<el-dialog ref="defendantDialog" class="addList" :visible.sync="dialogVisibleDefendant"
:before-close="handleCloseDefendant" title="添加被告信息">
<div>
<el-form-item label="被告类型:" prop="defendantDialog.type" >
<el-select v-model="defendantDialog.type" placeholder="请选择被告类型">
<el-option v-for="item in defendantDialog.typeList" :key="item.id" :label="item.name"
:value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="单位名称:" prop="defendantDialog.unitName" >
<el-input v-model="defendantDialog.unitName" placeholder="请填写单位名称" maxlength="20" />
</el-form-item>
</div>
<div>
<el-form-item label="证件类型:" prop="defendantDialog.licenseType">
<el-select v-model="defendantDialog.licenseType" placeholder="请选择证件类别">
<el-option v-for="item in defendantDialog.licenseTypeList" :key="item.id" :label="item.name"
:value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="证件号:" prop="defendantDialog.licenseNum">
<el-input v-model="defendantDialog.licenseNum" placeholder="请填写证件号" maxlength="30" />
</el-form-item>
</div>
<div>
<el-form-item label="单位所在地:" prop="defendantDialog.unitLocation">
<el-input v-model="defendantDialog.unitLocation" placeholder="请填写单位所在地" maxlength="30" />
</el-form-item>
<el-form-item label="联系电话:" prop="defendantDialog.phoneNum">
<el-input v-model="defendantDialog.phoneNum" placeholder="请填写联系电话" maxlength="30" />
</el-form-item>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleCloseDefendant">取消</el-button>
<el-button type="primary" @click="addDefendantTableList">确定</el-button>
</span>
</el-dialog>
<el-dialog ref="attachmentDialog" class="addList" :visible.sync="dialogVisibleAttachment"
:before-close="handleCloseAttachment" title="上传附件信息">
<div style="display: flex; flex-direction: row;">
<div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;" >
<el-form-item label="附件类型:" prop="attachmentDialog.type" >
<el-select v-model="attachmentDialog.type" placeholder="请选择附件类型">
<el-option v-for="item in attachmentDialog.typeList" :key="item.id" :label="item.name"
:value="item.id" />
</el-select>
</el-form-item>
</div>
<div style="flex: 1; display: flex; justify-content: center; align-items: center; height: 300px;">
<el-upload
class="upload-demo"
drag
action="http://localhost:8080/file/upload"
:file-list="fileList"
:on-success="handleSuccess"
:before-upload="beforeAvatarUpload"
:limit="1">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<!--<div class="el-upload__tip" slot="tip">只能上传jpg/png/txt/pdf/excel文件且不超过2MB</div>-->
</el-upload>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleCloseAttachment">取消</el-button>
<el-button type="primary" @click="addAttachmentTableList">确定</el-button>
</span>
</el-dialog>
</el-form>
</div>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../js/validate.js"></script>
<script src="../../js/index.js"></script>
<script src="../../api/food.js"></script>
<script>
new Vue({
el: '#hearCase-add-app',
data() {
return {
caseTypeList: [
{ id: 1, name: "审理案件" },
{ id: 2, name: "执行案件" }
],
caseStatusList: [
{ id: 1, name: "等待开庭" },
{ id: 2, name: "已开庭,等待诉讼费" }
],
ruleForm: {
'caseNum': '',
caseType: '',
},
plaintiffDialog: {
typeList: [
{ id: 1, name: "法人" },
{ id: 2, name: "其他" }
],
type: '',
unitName: "",
licenseType: '',
licenseTypeList: [
{ id: 1, name: "统一社会信用代码证" },
{ id: 2, name: "其他" }
],
licenseNum: '',
unitLocation: '',
phoneNum: ''
},
defendantDialog: {
typeList: [
{ id: 1, name: "法人" },
{ id: 2, name: "其他" }
],
type: '',
unitName: "",
licenseType: '',
licenseTypeList: [
{ id: 1, name: "统一社会信用代码证" },
{ id: 2, name: "其他" }
],
licenseNum: '',
unitLocation: '',
phoneNum: ''
},
attachmentDialog: {
typeList: [
{ id: 1, name: "附件1" },
{ id: 2, name: "附件2" }
],
},
plaintiffTable: [
{ unitName: '原告1公司', unitLocation: '地点1', licenseNum: '证件号1' },
{ unitName: '原告2公司', unitLocation: '地点2', licenseNum: '证件号2' },
// 可根据需要添加更多原告数据...
],
defendantTable: [
{ unitName: '被告1公司', unitLocation: '地点1', licenseNum: '证件号1' },
{ unitName: '被告2公司', unitLocation: '地点2', licenseNum: '证件号2' },
// 可根据需要添加更多被告数据...
],
attachmentTable: [
],
fileList: [],
fileInfo:{
virtualPath: ""
},
dialogVisiblePlaintiff: false, // 控制原告dialog显示/隐藏
dialogVisibleDefendant: false, // 控制被告dialog显示/隐藏
dialogVisibleAttachment: false,
attachmentTypeList: [
{ id: 1, name: '附件1' },
{ id: 2, name: '附件2' },
{ id: 3, name: '附件3' },
],
attachmentType: '',
attachmentList: [],
amountList: [], // 金额列表
amountTypeData: [ // 金额类型数据
{ id: 1, name: '金额类型1' },
{ id: 2, name: '金额类型2' },
{ id: 3, name: '金额类型3' },
// 可根据需要添加更多金额类型...
],
amountInfo: [], // 用于存储金额信息的数组
amountNumber: '', // 用于存储金额数目的变量
amountDescription: '', // 用于存储金额备注的变量
}
},
computed: {
rules() {
return {
}
}
},
created() {
this.id = requestUrlParam('id')
this.actionType = this.id ? 'edit' : 'add'
if (this.id) {
this.init()
}
},
mounted() {
},
methods: {
async init() {
},
addAttachment() {
// 在这里执行添加附件的逻辑
this.attachmentList.push({ 'name': '', 'value': [], showOption: false })
console.log('Add addAttachment Clicked!');
},
deleteAttachment(index) {
this.attachmentList.splice(index, 1)
},
openAddPlaintiff() {
this.dialogVisiblePlaintiff = true;
},
handleClosePlaintiff(done) {
// 处理关闭原告dialog的逻辑
this.dialogVisiblePlaintiff = false;
done(); // 关闭弹窗
},
handleCloseDefendant(done) {
// 处理关闭被告dialog的逻辑
this.dialogVisibleDefendant = false;
done(); // 关闭弹窗
},
handleCloseAttachment(done) {
this.dialogVisibleAttachment = false;
done();
},
delPlaintiffHandle(index) {
// 处理删除原告的逻辑,可根据需求自行实现
this.plaintiffTable.splice(index, 1);
},
delDefendantHandle(index) {
// 处理删除原告的逻辑,可根据需求自行实现
this.defendantTable.splice(index, 1);
},
delAttachmentHandle(idnex) {
this.attachmentTable.splice(index, 1);
},
openAddDefendant() {
// 初始化被告相关数据
this.dialogVisibleDefendant = true;
},
openAddAttachment() {
this.dialogVisibleAttachment = true;
},
addDefendantTableList() {
this.defendantTable.push({ ...this.defendantDialog });
// 清空表单数据
this.defendantDialog = {
typeList: [
{ id: 1, name: "法人" },
{ id: 2, name: "其他" }
],
type: '',
unitName: "",
licenseType: '',
licenseTypeList: [
{ id: 1, name: "统一社会信用代码证" },
{ id: 2, name: "其他" }
],
licenseNum: '',
unitLocation: '',
phoneNum: ''
};
this.dialogVisibleDefendant = false
},
addPlaintiffTableList() {
this.plaintiffTable.push({ ...this.plaintiffDialog });
// 清空表单数据
this.plaintiffDialog = {
typeList: [
{ id: 1, name: "法人" },
{ id: 2, name: "其他" }
],
type: '',
unitName: "",
licenseType: '',
licenseTypeList: [
{ id: 1, name: "统一社会信用代码证" },
{ id: 2, name: "其他" }
],
licenseNum: '',
unitLocation: '',
phoneNum: ''
};
this.dialogVisiblePlaintiff = false
},
addAttachmentTableList() {
},
beforeAvatarUpload(file) {
/*//alert(file.type)
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
const isPDF = file.type === 'application/pdf';
const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
const isXLS = file.type === 'application/vnd.ms-excel'
if (!isJPG && !isPNG && !isPDF && isXLSX && isXLS) {
this.$message.error('上传文件格式只能是 JPG PNG TXT PDF XLS XLSX格式!');
}
return (isJPG || isPNG || isPDF || isXLSX || isXLS) ;*/
},
handleSuccess(result) {
alert("上传成功")
console.log("存储路径:"+result.virtualPath)
console.log("文件名:"+result.fileName)
this.fileInfo.virtualPath=result.virtualPath
},
downFile(){
alert("开始下载")
//动态获取刚刚上传的文件的路径,所以必须先上传,再下载,当然你也可以把路径写死
//实际项目中,获取目标文件路径即可,这个不是重点
console.log(this.fileInfo.virtualPath)
var url = "http://localhost:8080/api/file/downloadFile?filePath="+this.fileInfo.virtualPath
//这里直接使用window.open 发起请求在新页面显示返回的内容,也可以使用axios,这样比较简单,效果类似
window.open(url)
},
addAmount() {
this.amountList.push({ type: '', value: '', remarks: '', showOption: false });
},
delAmount(index) {
this.amountList.splice(index, 1);
},
selectAmount(st, index) {
const obj = { ...this.amountList[index] };
obj.showOption = st;
this.$set(this.amountList, index, obj);
},
outAmountSelect(st, index) {
setTimeout(() => {
const obj = { ...this.amountList[index] };
obj.showOption = st;
this.$set(this.amountList, index, obj);
}, 200);
},
amountInputHandle(index) {
// 处理金额输入框输入事件
},
checkAmountType(type, ind, index) {
this.selectAmount(false, index);
this.amountList[index].type = type.name;
},
addAmountInfo() {
// 添加金额信息的方法
this.amountInfo.push({
name: '',
showOption: false,
});
},
selectAmountType(show, index) {
// 显示金额类型选项的方法
this.$set(this.amountInfo, index, { ...this.amountInfo[index], showOption: show });
},
outSelectAmountType(show, index) {
// 隐藏金额类型选项的方法
this.$set(this.amountInfo, index, { ...this.amountInfo[index], showOption: show });
},
inputAmountTypeHandle(index) {
// 处理金额类型输入的方法
// 如果需要,可以基于输入实现逻辑
},
checkAmountTypeOption(option, ind, index) {
// 处理选择金额类型选项的方法
this.$set(this.amountInfo, index, { ...this.amountInfo[index], name: option.name, showOption: false });
},
delAmountInfo(index) {
// 删除金额信息的方法
this.amountInfo.splice(index, 1);
},
goBack() {
window.parent.menuHandle({
id: '3',
url: '/backend/page/food/list.html',
name: '案件管理'
}, false)
}
}
})
</script>
</body>
</html>