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

622 lines
31 KiB
HTML

<!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"
class="demo-ruleForm">
<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">
<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">
<el-input v-model="ruleForm.court" placeholder="请填写法院名称:" maxlength="20" />
</el-form-item>
<el-form-item label="案件状态:" prop="caseStatus">
<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="plaintiff">
<el-form-item>
<div class="addTable">
<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="defendant">
<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="附件信息:">
<el-form-item>
<div class="flavorBox">
<span v-if="dishFlavors.length == 0" class="addBut" @click="addFlavore"> + 添加附件</span>
<div v-if="dishFlavors.length != 0" class="flavor">
<div class="title">
<span>附件类型</span><span>点击上传附件</span>
</div>
<div class="cont">
<div v-for="(item, index) in dishFlavors" :key="index" class="items">
<div class="itTit">
<div class="selectInput">
<div>
<el-input v-model="item.name" type="text" style="width: 100%"
placeholder="选择附件类别" @focus="selectFlavor(true,index)"
@blur="outSelect(false,index)"
@input="inputHandle(index)" />
</div>
<div v-show="item.showOption" class="flavorSelect">
<span v-for="(it, ind) in dishFlavorsData" :key="ind"
class="items" @click="checkOption(it,ind,index)">{{ it.name
}}</span>
<span v-if="dishFlavorsData == []" class="none">无数据</span>
</div>
</div>
</div>
<div style="display: flex">
<span>
<el-upload class="upload-demo" action="/your-upload-url"
:before-upload="beforeUpload" :on-success="handleSuccess"
:on-error="handleError" :show-file-list="false">
<el-button style="width :510px; height: 40px" size="small"
type="primary">点击上传文件</el-button>
</el-upload>
</span>
</div>
<span class="delFlavor delBut non" @click="delFlavor(index)">删除</span>
</div>
</div>
<div class="addBut" @click="addFlavore">
添加附件
</div>
</div>
</div>
</el-form-item>
</el-form-item>
</div>
<div>
<el-form-item label="金额信息:">
<el-form-item>
<div class="flavorBox">
<span v-if="amountInfo.length == 0" class="addBut" @click="addAmountInfo"> + 添加金额</span>
<div v-if="amountInfo.length != 0" class="flavor">
<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>
<el-dialog ref="plaintiffDialog" class="addList" :visible.sync="dialogVisiblePlaintiff"
:before-close="handleClosePlaintiff" >
<el-input v-model="searchPlaintiffValue" class="searchInfo" placeholder="请输入原告单位名称进行搜索"
style="width: 250px" size="small" clearable>
<i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer"
@click="searchPlaintiffHandle"></i>
</el-input>
<div class="addCon">
<div class="leftCont">
<div class="tabList">
<div class="table">
<div v-if="plaintiffAddList.length == 0" style="padding-left:10px">
暂无原告信息!
</div>
<el-checkbox-group v-if="plaintiffAddList.length > 0" v-model="checkedPlaintiffList"
@change="checkedPlaintiffHandle">
<div v-for="(item, index) in plaintiffAddList" :key="index" class="items">
<el-checkbox :key="index" :label="item">
<div class="item">
<span>{{item.unitName}}</span>
<span>{{item.unitLocation}}</span>
<span>{{item.licenseNum}}</span>
</div>
</el-checkbox>
</div>
</el-checkbox-group>
</div>
</div>
</div>
<div class="ritCont">
<div class="title">
已选原告({{checkedPlaintiffList.length}})
</div>
<div class="items">
<div v-for="(item, ind) in checkedPlaintiffList" :key="ind" class="item">
<span>{{item.unitName}}</span>
<span class="separator">|</span>
<span>{{item.unitLocation}}</span>
<span class="separator">|</span>
<span>{{item.licenseNum}}</span>
<span class="del" @click="delPlaintiffCheck(ind)">
<img src="../../images/icons/btn_clean@2x.png" alt="">
</span>
</div>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handlePlaintiffClose">取消</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" :width="auto" :height="auto">
<el-input v-model="searchDefendantValue" class="searchInfo" placeholder="请输入原告单位名称进行搜索"
style="width: 250px" size="small" clearable>
<i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer"
@click="searchDefendantHandle"></i>
</el-input>
<div class="addCon">
<div class="leftCont">
<div class="tabList">
<div class="table">
<div v-if="defendantAddList.length == 0" style="padding-left:10px">
暂无被告信息!
</div>
<el-checkbox-group v-if="defendantAddList.length > 0" v-model="checkedDefendantList"
@change="checkedDefendantHandle">
<div v-for="(item, index) in defendantAddList" :key="index" class="items">
<el-checkbox :key="index" :label="item">
<div class="item">
<span>{{item.unitName}}</span>
<span>{{item.unitLocation}}</span>
<span>{{item.licenseNum}}</span>
</div>
</el-checkbox>
</div>
</el-checkbox-group>
</div>
</div>
</div>
<div class="ritCont">
<div class="title">
已选被告({{checkedDefendantList.length}})
</div>
<div class="items">
<div v-for="(item, ind) in checkedDefendantList" :key="ind" class="item">
<span>{{item.unitName}}</span>
<span class="separator">|</span>
<span>{{item.unitLocation}}</span>
<span class="separator">|</span>
<span>{{item.licenseNum}}</span>
<span class="del" @click="delDefendantCheck(ind)">
<img src="../../images/icons/btn_clean@2x.png" alt="">
</span>
</div>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleDefendantClose">取消</el-button>
<el-button type="primary" @click="addDefendantTableList">确定</el-button>
</span>
</el-dialog>
<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-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: '',
},
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' },
// 可根据需要添加更多被告数据...
],
// 原告弹窗中的可选项数据
plaintiffAddList: [
{ unitName: '中国建设银行股份有限公司', unitLocation: '江苏省无锡市宜兴市官林镇关张街道', licenseNum: '64222420001025301X' },
{ unitName: '原告2公司', unitLocation: '地点2', licenseNum: '证件号2' },
{ unitName: '原告3公司', unitLocation: '地点3', licenseNum: '证件号3' },
// 可根据需要添加更多原告可选项...
],
// 被告弹窗中的可选项数据
defendantAddList: [
{ unitName: '被告1公司', unitLocation: '地点1', licenseNum: '证件号1' },
{ unitName: '被告2公司', unitLocation: '地点2', licenseNum: '证件号2' },
{ unitName: '被告3公司', unitLocation: '地点3', licenseNum: '证件号3' },
// 可根据需要添加更多被告可选项...
],
searchPlaintiffValue: "", // 初始化搜索原告的变量
searchDefendantValue: "", // 初始化搜索被告的变量
checkedPlaintiffList: [], // 初始化已选原告列表
checkedDefendantList: [], // 初始化已选被告列表
dialogVisiblePlaintiff: false, // 控制原告dialog显示/隐藏
dialogVisibleDefendant: false, // 控制被告dialog显示/隐藏
dishFlavors: [], // 附件类型数组
dishFlavorsData: [
{ id: 1, name: '附件类别1' },
{ id: 2, name: '附件类别2' },
{ id: 3, name: '附件类别3' },
// Add more categories as needed...
],
amountList: [], // 金额列表
amountTypeData: [ // 金额类型数据
{ id: 1, name: '金额类型1' },
{ id: 2, name: '金额类型2' },
{ id: 3, name: '金额类型3' },
// 可根据需要添加更多金额类型...
],
amountInfo: [], // 用于存储金额信息的数组
amountTypeData: [], // 用于存储金额类型数据的数组
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() {
},
addFlavore() {
// 在这里执行添加附件的逻辑
this.dishFlavors.push({ 'name': '', 'value': [], showOption: false })
console.log('Add Flavore Clicked!');
},
delFlavor(index) {
this.dishFlavors.splice(index, 1)
},
// 修正删除已选原告的方法
delPlaintiffCheck(index) {
this.checkedPlaintiffList.splice(index, 1);
},
// 修正删除已选被告的方法
delDefendantCheck(index) {
this.checkedDefendantList.splice(index, 1);
},
openAddPlaintiff() {
this.dialogVisiblePlaintiff = true;
},
handleClosePlaintiff(done) {
// 处理关闭原告dialog的逻辑
this.dialogVisiblePlaintiff = false;
done(); // 关闭弹窗
},
handleCloseDefendant(done) {
// 处理关闭被告dialog的逻辑
this.dialogVisibleDefendant = false;
done(); // 关闭弹窗
},
delPlaintiffHandle(index) {
// 处理删除原告的逻辑,可根据需求自行实现
this.plaintiffTable.splice(index, 1);
},
delDefendantHandle(index) {
// 处理删除原告的逻辑,可根据需求自行实现
this.defendantTable.splice(index, 1);
},
openAddDefendant() {
// 初始化被告相关数据
this.dialogVisibleDefendant = true;
},
searchDefendantHandle() {
// 处理搜索被告逻辑
// 例如:调用接口进行搜索
},
searchPlaintiffHandle() {
},
// Initialize checkedPlaintiffHandle function
checkedPlaintiffHandle(value) {
},
// Initialize checkedDefendantHandle function
checkedDefendantHandle(value) {
},
addDefendantTableList() {
this.defendantTable = JSON.parse(JSON.stringify(this.checkedDefendantList))
this.defendantTable.forEach((n) => {
n.copies = 1
})
this.dialogVisibleDefendant = false
},
addPlaintiffTableList() {
this.plaintiffTable = JSON.parse(JSON.stringify(this.checkedPlaintiffList))
this.plaintiffTable.forEach((n) => {
n.copies = 1
})
this.dialogVisiblePlaintiff = false
},
handleDefendantClose() {
this.dialogVisibleDefendant = false
},
handlePlaintiffClose() {
this.dialogVisiblePlaintiff = false
},
checkOption(val, ind, index) {
this.selectHandle(val.name, index, ind)
this.dishFlavors[index].name = val.name
},
selectHandle(val, key, ind) {
const arrDate = [...this.dishFlavors]
arrDate[key] = JSON.parse(JSON.stringify(this.dishFlavorsData[ind]))
this.dishFlavors = arrDate
},
selectFlavor(st, index) {
const obj = JSON.parse(JSON.stringify(this.dishFlavors[index]))
obj.showOption = st
this.dishFlavors.splice(index, 1, obj)
},
outSelect(st, index) {
const _this = this
setTimeout(() => {
const obj = JSON.parse(JSON.stringify(_this.dishFlavors[index]))
obj.showOption = st
_this.dishFlavors.splice(index, 1, obj)
}, 200)
},
inputHandle(val, index) {
// this.selectFlavor(false,index)
},
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>