chenglb
/
PMS_Frontend_v1.0.0
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix():修改计费规则传参

tags/PMS_Frontend_v1.0.6-develop
guoxin 1 year ago
parent
e60ab44933
commit
20d1dc1069
4 changed files with 476 additions and 420 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 49
      src/pages/InRoadMgm/BusinessMgm/ChargeRules/EditModal.jsx
  2. 322
      src/pages/InRoadMgm/BusinessMgm/ChargeRules/FormModal.jsx
  3. 427
      src/pages/InRoadMgm/BusinessMgm/ChargeRules/index.scss
  4. 98
      src/pages/SystemMgm/OrgnizationMgm/loadable.jsx

49
src/pages/InRoadMgm/BusinessMgm/ChargeRules/EditModal.jsx
View File

@ -30,7 +30,7 @@ const FormModal = (props) => {
const defaultData = {
feeName: '',
freeTimeAble: 0,
operationId: '',
operator_name: '',
feeCode: '',
freeTime: '',
description: '',
@ -255,7 +255,7 @@ const FormModal = (props) => {
<Form.Item
name="feeName"
label="规则名称"
className="yisa-label"
className="yisa-label inputSearch"
rules={[{ required: true, message: "请选择${label}" }]}
>
<Input placeholder="请输入规则名称" style={{ width: 200, marginLeft: 10 }} autoComplete="off" />
@ -264,16 +264,16 @@ const FormModal = (props) => {
<Form.Item
name="feeCode"
label="规则编码"
className="yisa-label"
className="yisa-label inputSearch"
rules={[{ required: true, message: "请选择${label}" }]}
>
<Input placeholder="请输入规则编码" style={{ width: 200, marginLeft: 10 }} autoComplete="off" />
</Form.Item>
<Form.Item
name="operationId"
name="operator_name"
label="商户名称"
className="yisa-label"
className="yisa-label inputSearch"
rules={[{ required: true, message: "请选择${label}" }]}
>
<Select
@ -299,8 +299,8 @@ const FormModal = (props) => {
<div className="row">
<Form.Item
name="freeTime"
label="普通免费分钟数"
className="yisa-label"
label="普通免费分钟数 "
className="yisa-label minSearch"
rules={[{ required: true, message: "请选择${label}" }]}
>
<Input placeholder="请输入免费分钟数" style={{ marginLeft: 10 }} autoComplete="off" />
@ -320,7 +320,7 @@ const FormModal = (props) => {
<Form.Item
name="evFreeTime"
label="免费分钟数"
className="yisa-label"
className="yisa-label timeSearch"
rules={[{ required: true, message: "请输入${label}" }]}
>
<Input
@ -333,7 +333,7 @@ const FormModal = (props) => {
<Form.Item
name="evCarDiscount"
label="折扣系数"
className="yisa-label"
className="yisa-label timeSearch"
rules={[{ required: true, message: "请输入${label}" }]}
>
<Input
@ -387,14 +387,14 @@ const FormModal = (props) => {
// console.log(fields);
return (
<div className="yisa-table">
<div className="row-line" key={key}>
<div className="row-line" key={'rules-'+key}>
<div className="timeAdd">
<Space direction="vertical" size={12}>
<Form.Item
{...restField}
name={[name, "date"]}
label="生效日期"
className="yisa-label"
className="yisa-label inputSearch"
rules={[{ required: true, message: "请选择${label}" }]}
>
<DatePicker
@ -453,10 +453,10 @@ const FormModal = (props) => {
<Form.List name={[name, "details"]}>
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, ...restField }, j) => {
{fields.map(({ key, name, ...restField }, i) => {
// console.log(fields);
return (
<div key={key}>
<div key={'details-'+key}>
<div className="row">
<Form.Item
{...restField}
@ -466,7 +466,7 @@ const FormModal = (props) => {
>
<TimePicker format={format} style={{ marginLeft: 10 }} />
</Form.Item>
to
<label className="mid">to</label>
<Form.Item
{...restField}
name={[name, "end"]}
@ -479,7 +479,7 @@ const FormModal = (props) => {
label=""
>
{
!j ?
!i ?
<PlusCircleOutlined
onClick={() =>
add({
@ -510,10 +510,9 @@ const FormModal = (props) => {
<Form.List name={[name, "items"]}>
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, ...restField }, j) => {
// console.log(fields);
{fields.map(({ key, name, ...restField }, z) => {
return (
<div className="row-line" key={key}>
<div className="row-line" key={'items-'+key}>
<div className="row">
<Form.Item
name={[name, "type"]}
@ -539,8 +538,11 @@ const FormModal = (props) => {
]}
/>
</Form.Item>
<Form.Item
noStyle
shouldUpdate>
{
getValue == 3 ?
form?.getFieldValue('rules')[j].details[i].items[z].type == '3' ?
<div className="row">
<Form.Item
{...restField}
@ -549,7 +551,7 @@ const FormModal = (props) => {
>
<Input style={{ width: 50, marginLeft: 10 }} />
</Form.Item>
<label>元/次</label>
<label className="mid">元/次</label>
</div>
:
<div className="row">
@ -561,7 +563,7 @@ const FormModal = (props) => {
<Input style={{ width: 50, marginLeft: 10 }} />
</Form.Item>
<label>分钟</label>
<label className="mid">分钟</label>
<Form.Item
{...restField}
name={[name, "unit"]}
@ -569,7 +571,7 @@ const FormModal = (props) => {
>
<Input style={{ width: 50, marginLeft: 10 }} />
</Form.Item>
<label>元/</label>
<label className="mid">元/</label>
<Form.Item
{...restField}
name={[name, "period"]}
@ -577,9 +579,10 @@ const FormModal = (props) => {
>
<Input style={{ width: 50, marginLeft: 10 }} />
</Form.Item>
<label>分钟</label>
<label className="mid">分钟</label>
</div>
}
</Form.Item>
<Form.Item
className="btm-box"
>

322
src/pages/InRoadMgm/BusinessMgm/ChargeRules/FormModal.jsx
View File

@ -21,7 +21,7 @@ const FormModal = (props) => {
yisaData = {},
addVisible,
closAddModal = () => { },
setGetAddVisible=()=>{}
setGetAddVisible = () => { }
} = props
// 表单信息
const [form] = Form.useForm();
@ -78,11 +78,13 @@ const FormModal = (props) => {
};
const [formData, setFormData] = useState(defaultData)
const [getNewCar, setGetNewCar] = useState(false)
// 新能源车
const getNewCarRef = useRef(null)
getNewCarRef.current = false
// 残疾人车
const [getPerson, setGetPerson] = useState()
const [getPerson, setGetPerson] = useState(false)
// // 新能源车
// const getNewCarRef = useRef(null)
// getNewCarRef.current = false
// // 残疾人车
// const getNewCarDisability = useRef(null)
// getNewCarDisability.current = false
// 区间
const [getValue, setGetValue] = useState(1)
const [getValue2, setGetValue2] = useState(1)
@ -99,72 +101,71 @@ const FormModal = (props) => {
// 表单改变事件
const handleForm = (changedValues, allValues) => {
// let obj = {};
console.log('表单', changedValues, allValues);
let obj = {};
let key = Object.keys(changedValues)[0];
let val = Object.values(changedValues)[0];
console.log('val', val);
console.log('key', key);
if(key == 'newCarStatus'){
getNewCarRef.current = val
if (key == 'newCarStatus') {
setGetNewCar(val)
}
if (key == 'newCarDisability') {
setGetPerson(val)
}
switch (key) {
case "freeTimeAble":
obj[key] = val ? 1 : 0;
break;
case "newCarStatus":
obj[key] = val ? 1 : 0;
break;
case "rules":
let _arr = allValues["rules"];
if (val?.length) {
// 获取改变值的索引
let curNum = val.length - 1;
let curObj = val[curNum];
if (curObj) {
let _key = Object.keys(curObj)[0];
let _val = Object.values(curObj)[0];
if (_key == "unitUp") {
_arr[curNum][_key] = _val ? 1 : 0;
} else if (_key == "details" || _key == "holiday") {
let _curNum = _val.length - 1;
let _curObj = _val[curNum];
if (_curObj) {
let _dkey = Object.keys(_curObj)[0];
let _dval = Object.values(_curObj)[0];
if (_dkey == "items") {
let _iurNum = _dval.length - 1;
let _iurObj = _dval[curNum];
if (_iurObj) {
let _ikey = Object.keys(_iurObj)[0];
let _ival = Object.values(_iurObj)[0];
_arr[curNum][_key][_curNum][_dkey][_iurNum][_ikey] = _ival;
}
} else {
_arr[curNum][_key][_curNum][_dkey] = _dval;
}
}
} else {
_arr[curNum][_key] = _val;
}
}
}
if (val?.date) {
_arr[0].date = val.date;
}
obj[key] = _arr;
break;
default:
obj[key] = val;
break;
}
// switch (key) {
// case "freeTimeAble":
// obj[key] = val ? 1 : 0;
// break;
// case "newCarStatus":
// obj[key] = val ? 1 : 0;
// break;
// case "rules":
// let _arr = allValues["rules"];
// if (val?.length) {
// // 获取改变值的索引
// let curNum = val.length - 1;
// let curObj = val[curNum];
// if (curObj) {
// let _key = Object.keys(curObj)[0];
// let _val = Object.values(curObj)[0];
// if (_key == "unitUp") {
// _arr[curNum][_key] = _val ? 1 : 0;
// } else if (_key == "details" || _key == "holiday") {
// let _curNum = _val.length - 1;
// let _curObj = _val[curNum];
// if (_curObj) {
// let _dkey = Object.keys(_curObj)[0];
// let _dval = Object.values(_curObj)[0];
// if (_dkey == "items") {
// let _iurNum = _dval.length - 1;
// let _iurObj = _dval[curNum];
// if (_iurObj) {
// let _ikey = Object.keys(_iurObj)[0];
// let _ival = Object.values(_iurObj)[0];
// console.log('_ikey', _ikey, _ival);
// _arr[curNum][_key][_curNum][_dkey][_iurNum][_ikey] = _ival;
// }
// } else {
// _arr[curNum][_key][_curNum][_dkey] = _dval;
// }
// }
// } else {
// _arr[curNum][_key] = _val;
// }
// }
// }
// if (val?.date) {
// _arr[0].date = val.date;
// }
// obj[key] = _arr;
// break;
// default:
// obj[key] = val;
// break;
// }
let newObj = { ...form.getFieldsValue() };
form.setFieldsValue(newObj);
changeGetNewCar()
// changeGetNewCar()
// changeNewCarDisability()
};
const changeGetNewCar = ()=>{
setGetNewCar(getNewCarRef.current)
}
// 处理时间
const handelTime = (arr, type) => {
@ -219,16 +220,12 @@ const FormModal = (props) => {
if (JSON.stringify(yisaData) != "{}") {
newObj = handelDate(yisaData, 2)
}
// console.log(newObj);
form.setFieldsValue(newObj);
}, [yisaData]);
}, []);
useEffect(() => {
operationName()
}, [])
useEffect(() => {
console.log(getNewCar);
}, [getNewCar])
@ -253,7 +250,7 @@ const FormModal = (props) => {
<Form.Item
name="feeName"
label="规则名称"
className="yisa-label"
className="yisa-label inputSearch"
rules={[{ required: true, message: "请选择${label}" }]}
>
<Input placeholder="请输入规则名称" style={{ width: 200, marginLeft: 10 }} autoComplete="off" />
@ -262,7 +259,7 @@ const FormModal = (props) => {
<Form.Item
name="feeCode"
label="规则编码"
className="yisa-label"
className="yisa-label inputSearch"
rules={[{ required: true, message: "请选择${label}" }]}
>
<Input placeholder="请输入规则编码" style={{ width: 200, marginLeft: 10 }} autoComplete="off" />
@ -271,7 +268,7 @@ const FormModal = (props) => {
<Form.Item
name="operationId"
label="商户名称"
className="yisa-label"
className="yisa-label inputSearch"
rules={[{ required: true, message: "请选择${label}" }]}
>
<Select
@ -298,82 +295,86 @@ const FormModal = (props) => {
<Form.Item
name="freeTime"
label="普通免费分钟数"
className="yisa-label"
className="yisa-label minSearch"
rules={[{ required: true, message: "请选择${label}" }]}
>
<Input placeholder="请输入免费分钟数" style={{ marginLeft: 10 }} autoComplete="off" />
</Form.Item>
<label className="yisa-label">单位：分钟，免费停车时间</label>
</div>
<Form.Item name="freeTimeAble" valuePropName="checked">
<Checkbox>免费分钟数不纳入计费时长</Checkbox>
</Form.Item>
<Form.Item valuePropName="checked" name="newCarStatus">
<Checkbox>新能源车</Checkbox>
</Form.Item>
{
getNewCar?
<div >
{getNewCar ?
<div >
<div className="place">
<Form.Item
name="evFreeTime"
label="免费分钟数"
className="yisa-label"
className="yisa-label timeSearch"
rules={[{ required: true, message: "请输入${label}" }]}
>
<Input
style={{ width: 200, marginLeft: 10 }}
placeholder="请输入免费分钟数"
/>
<label>单位：分钟，免费停车时间</label>
</Form.Item>
<label>单位：分钟，免费停车时间</label>
</div>
<div className="place">
<Form.Item
name="evCarDiscount"
label="折扣系数"
className="yisa-label"
className="yisa-label timeSearch"
rules={[{ required: true, message: "请输入${label}" }]}
>
<Input
style={{ width: 200, marginLeft: 10 }}
placeholder="请输入0-100的值"
/>
<label>单位：%</label>
</Form.Item>
<label>单位：%</label>
</div>
</div> : ''}
</div> : ''
}
<Form.Item valuePropName="checked" name="newCarDisability">
<Checkbox>残疾人车</Checkbox>
</Form.Item>
{
getPerson === true ?
getPerson == true ?
<div >
<Form.Item
name="disabledFreeTime"
label="免费分钟数"
className="yisa-label"
rules={[{ required: true, message: "请输入${label}" }]}
>
<Input
style={{ width: 200, marginLeft: 10 }}
placeholder="请输入免费分钟数"
/>
<div className="place">
<Form.Item
name="disabledFreeTime"
label="免费分钟数"
className="yisa-label timeSearch"
rules={[{ required: true, message: "请输入${label}" }]}
>
<Input
style={{ width: 200, marginLeft: 10 }}
placeholder="请输入免费分钟数"
/>
</Form.Item>
<label>单位：分钟，免费停车时间</label>
</Form.Item>
<Form.Item
name="disabledCarDiscount"
label="折扣系数"
className="yisa-label"
rules={[{ required: true, message: "请输入${label}" }]}
>
<Input
style={{ width: 200, marginLeft: 10 }}
placeholder="请输入0-100的值"
/>
</div>
<div className="place">
<Form.Item
name="disabledCarDiscount"
label="折扣系数"
className="yisa-label timeSearch"
rules={[{ required: true, message: "请输入${label}" }]}
>
<Input
style={{ width: 200, marginLeft: 10 }}
placeholder="请输入0-100的值"
/>
</Form.Item>
<label>单位：%</label>
</Form.Item>
</div>
</div> : ''
}
@ -385,14 +386,14 @@ const FormModal = (props) => {
// console.log(fields);
return (
<div className="yisa-table">
<div className="row-line" key={key}>
<div className="row-line" key={'rules-' + key}>
<div className="timeAdd">
<Space direction="vertical" size={12}>
<Form.Item
{...restField}
name={[name, "date"]}
label="生效日期"
className="yisa-label"
className="yisa-label inputSearch"
rules={[{ required: true, message: "请选择${label}" }]}
>
<DatePicker
@ -451,10 +452,10 @@ const FormModal = (props) => {
<Form.List name={[name, "details"]}>
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, ...restField }, j) => {
{fields.map(({ key, name, ...restField }, i) => {
// console.log(fields);
return (
<div key={key}>
<div key={'details-' + key}>
<div className="row">
<Form.Item
{...restField}
@ -464,7 +465,7 @@ const FormModal = (props) => {
>
<TimePicker format={format} style={{ marginLeft: 10 }} />
</Form.Item>
to
<label className="mid">to</label>
<Form.Item
{...restField}
name={[name, "end"]}
@ -477,7 +478,7 @@ const FormModal = (props) => {
label=""
>
{
!j ?
!i ?
<PlusCircleOutlined
onClick={() =>
add({
@ -508,10 +509,9 @@ const FormModal = (props) => {
<Form.List name={[name, "items"]}>
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, ...restField }, j) => {
// console.log(fields);
{fields.map(({ key, name, ...restField }, z) => {
return (
<div className="row-line" key={key}>
<div className="row-line" key={'items-' + key}>
<div className="row">
<Form.Item
name={[name, "type"]}
@ -537,47 +537,51 @@ const FormModal = (props) => {
]}
/>
</Form.Item>
{
getValue == 3 ?
<div className="row">
<Form.Item
{...restField}
name={[name, "unit"]}
label=""
>
<Input style={{ width: 50, marginLeft: 10 }} />
</Form.Item>
<label>元/次</label>
</div>
:
<div className="row">
<Form.Item
{...restField}
name={[name, "segment"]}
label=""
>
<Input style={{ width: 50, marginLeft: 10 }} />
</Form.Item>
<Form.Item
noStyle
shouldUpdate>
{
form?.getFieldValue('rules')[j].details[i].items[z].type == '3' ?
<div className="row">
<Form.Item
{...restField}
name={[name, "unit"]}
label=""
>
<Input style={{ width: 50, marginLeft: 10 }} />
</Form.Item>
<label className="mid">元/次</label>
</div>
:
<div className="row">
<Form.Item
{...restField}
name={[name, "segment"]}
label=""
>
<Input style={{ width: 50, marginLeft: 10 }} />
</Form.Item>
<label className="mid">分钟</label>
<Form.Item
{...restField}
name={[name, "unit"]}
label=""
>
<Input style={{ width: 50, marginLeft: 10 }} />
</Form.Item>
<label className="mid">元/</label>
<Form.Item
{...restField}
name={[name, "period"]}
label=""
>
<Input style={{ width: 50, marginLeft: 10 }} />
</Form.Item>
<label className="mid">分钟</label>
</div>
<label>分钟</label>
<Form.Item
{...restField}
name={[name, "unit"]}
label=""
>
<Input style={{ width: 50, marginLeft: 10 }} />
</Form.Item>
<label>元/</label>
<Form.Item
{...restField}
name={[name, "period"]}
label=""
>
<Input style={{ width: 50, marginLeft: 10 }} />
</Form.Item>
<label>分钟</label>
</div>
}
}
</Form.Item>
<Form.Item
className="btm-box"
>

427
src/pages/InRoadMgm/BusinessMgm/ChargeRules/index.scss
View File

@ -1,57 +1,57 @@
@import "@/assets/css/mixin.scss";
$color-container-bg : var(--color-container-bg);
$color-user-list-bg : var(--color-user-list-bg);
$color-text : var(--color-text);
$color-primary : var(--color-primary);
$color-container-bg: var(--color-container-bg);
$color-user-list-bg: var(--color-user-list-bg);
$color-text: var(--color-text);
$color-primary: var(--color-primary);
.paid-ChargeRules{
.paid-ChargeRules {
display: flex;
padding: 15px;
width: 100%;
.paid-search{
.search{
.paid-search {
.search {
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
font-family:
Microsoft YaHei,
Microsoft YaHei-Bold;
font-weight: 700;
text-align: left;
color: #eeeff1;
}
label{
margin:0 10px;
label {
margin: 0 10px;
}
.yisa-search{
.yisa-search {
margin-top: 10px;
display: flex;
label{
label {
line-height: 31px;
}
}
.ant-select:not(.ant-select-customize-input) .ant-select-selector{
.ant-select:not(.ant-select-customize-input) .ant-select-selector {
background-color: #50586c !important;
}
.ant-select-arrow .anticon{
.ant-select-arrow .anticon {
background-color: #50586c !important;
}
.ant-input:placeholder-shown{
.ant-input:placeholder-shown {
background-color: #50586c !important;
}
.timePicker{
.timePicker {
width: 350px;
margin-top: 22px;
.btnBox{
display:flex ;
margin-top: 20px;
.yisa-btn{
margin-left: 20px;
height: 36px;
border: none;
width: 150px;
}
.root_gfkk{
margin-left: 20px;
.export-content{
.btnBox {
display: flex;
margin-top: 20px;
.yisa-btn {
margin-left: 20px;
height: 36px;
border: none;
width: 150px;
}
.root_gfkk {
margin-left: 20px;
.export-content {
width: 130px;
height: 33px;
display: flex;
@ -63,74 +63,80 @@ $color-primary : var(--color-primary);
color: #fff;
margin-right: 10px;
}
}
}
}
}
}
.paid-result{
.paid-result {
width: 100%;
height: 834px;
background: #505a6f;
border-radius: 20px;
margin-left: 17px;
.result{
.result {
padding: 25px;
.font{
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
.font {
font-family:
Microsoft YaHei,
Microsoft YaHei-Regular;
font-weight: 400;
text-align: left;
color: #eeeff1;
margin-bottom: 10px;
display: inline-block;
em{
em {
color: #3aa8fe;
margin: 0 5px;
}
}
.yisa-table .ant-table-thead .ant-table-cell{
.yisa-table .ant-table-thead .ant-table-cell {
background-color: #616b83 !important;
color: #ffffff !important;
font-size: 14px;
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
font-weight: 700;
color: #ffffff !important;
font-size: 14px;
font-family:
Microsoft YaHei,
Microsoft YaHei-Bold;
font-weight: 700;
text-align: center;
border-right: none !important;
border-top-color: #888f9d !important;
border-color: #888f9d !important;
}
.ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table, .ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table{
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table,
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table {
border-top: none !important;
border-left: none !important;
}
.ant-table-tbody .ant-table-row .ant-table-cell{
.ant-table-tbody .ant-table-row .ant-table-cell {
background-color: #3e4557 !important;
color: #ffffff !important;
text-align: center;
font-size: 14px;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-family:
Microsoft YaHei,
Microsoft YaHei-Regular;
font-weight: 400;
border-right: none !important;
border-left: none !important;
border-bottom-color: #626b7e !important;
}
}
}
}
.revenue{
.tab-title{
.revenue {
.tab-title {
text-align: center;
font-size: 18px;
font-weight: 400;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-family:
Microsoft YaHei,
Microsoft YaHei-Regular;
}
width: 700px !important;
.tab-index{
.tab-top{
.tab-index {
.tab-top {
display: flex;
margin-top: 10px;
height: 30px;
@ -138,25 +144,27 @@ $color-primary : var(--color-primary);
white-space: nowrap;
overflow: hidden;
border-bottom: 1px solid #e4e7ed;
.tab-li{
.tab-li {
margin-left: 20px;
cursor: pointer;
}
.active{
color:#409eff ;
.active {
color: #409eff;
cursor: pointer;
margin-left: 20px;
border-bottom: 1px solid #409eff !important;
margin-bottom: -1px !important;
}
}
.tab-bottom{
.yisa-tab{
.ant-table-cell{
.tab-bottom {
.yisa-tab {
.ant-table-cell {
background-color: #616b83 !important;
color: #ffffff !important;
font-size: 14px;
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
font-family:
Microsoft YaHei,
Microsoft YaHei-Bold;
font-weight: 700;
text-align: center;
border-right: none !important;
@ -167,106 +175,112 @@ $color-primary : var(--color-primary);
}
}
}
.blackRecordBtn{
.blackRecordBtn {
background: #409eff;
border: none;
border-radius: 4px;
cursor: pointer;
border: none;
border-radius: 4px;
cursor: pointer;
}
.black{
div{
.black {
div {
cursor: pointer;
margin-top: 5px;
}
}
.addRuleModal{
.addRuleModal {
width: 700px !important;
.addRule::-webkit-scrollbar-track{
.addRule::-webkit-scrollbar-track {
background: white;
}
.addRule::-webkit-scrollbar-thumb{
.addRule::-webkit-scrollbar-thumb {
background: gray;
}
.addRule::-webkit-scrollbar{
width: 3px;
.addRule::-webkit-scrollbar {
width: 3px;
}
.addRule{
.addRule {
max-height: 473px;
overflow-y: auto;
.yisa-search{
.yisa-search {
margin: 20px 0 0 20px;
}
.line{
.line {
line-height: 49px;
}
.submitBtn{
.submitBtn {
text-align: center;
margin-top: 20px;
.submit{
.submit {
width: 80px;
height: 35px;
background: #409eff;
border: none;
border-radius: 4px;
cursor: pointer;
color: #fff;
height: 35px;
background: #409eff;
border: none;
border-radius: 4px;
cursor: pointer;
color: #fff;
}
.cancel{
width: 80px;
height: 35px;
background: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
margin-left: 20px;
.cancel {
width: 80px;
height: 35px;
background: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
margin-left: 20px;
}
}
.place{
display: flex;
}
}
.yisa-table{
.yisa-table {
margin-top: 20px;
border-top: 1px solid gray;
.timeAdd{
.timeAdd {
display: flex;
justify-content: space-between;
margin-top: 23px;
justify-content: space-between;
margin-top: 23px;
}
.TimeRuler{
.TimeRuler {
margin-top: 20px;
.ruler{
.ruler {
text-align: center;
}
.mid{
line-height: 35px;
}
}
.time{
.time {
display: flex;
margin-top: 20px;
.rule{
.rule {
line-height: 31px;
}
.ruleTime{
.details{
.ruleTime {
.details {
margin-left: 20px;
margin-top: 20px;
position: relative;
.detailsBottom{
.detailsBottom {
margin-top: 20px;
display: flex;
}
.addTime{
.addTime {
position: absolute;
top: 51px;
right: -55px;
}
}
}
.addTime{
.addTime {
font-size: 18px;
margin-left: 20px;
width: 31px;
cursor: pointer;
height: 30px;
}
.delTime{
.delTime {
font-size: 18px;
margin-left: 20px;
width: 31px;
@ -274,27 +288,27 @@ $color-primary : var(--color-primary);
height: 30px;
}
}
.notime{
.notime {
display: flex;
margin-top: 20px;
.rule{
.rule {
line-height: 31px;
}
.ruleTime{
.details{
.ruleTime {
.details {
margin-left: 20px;
margin-top: 20px;
position: relative;
.detailsBottom{
.detailsBottom {
margin-top: 20px;
display: flex;
}
.addTime{
.addTime {
position: absolute;
top: 51px;
right: -55px;
}
.addTimeTip{
.addTimeTip {
position: absolute;
top: 6px;
right: 40px;
@ -302,15 +316,15 @@ $color-primary : var(--color-primary);
}
}
}
.addTime{
.addTime {
font-size: 18px;
margin-left: 20px;
width: 31px;
cursor: pointer;
height: 30px;
}
.delTime{
.delTime {
font-size: 18px;
margin-left: 20px;
width: 31px;
@ -319,165 +333,182 @@ $color-primary : var(--color-primary);
}
}
}
.addRule{
.yisa-label{
.ant-form-item-label{
label{
margin-top: 5px;
.addRule {
.yisa-label {
.ant-form-item-label {
label {
margin-top: 5px;
// width: 150px;
}
}
}
.ant-form-item-label>label{
width: 50px;
}
.ant-form-item-row {
flex-wrap: unset;
flex-direction: row;
}
.inputSearch label{
width: 90px;
}
.minSearch label{
width: 180px;
}
.timeSearch label{
width: 111px;
}
}
}
.row{
display: flex;
.yisa-label{
margin: 0 0 0 27px;
.row {
display: flex;
.yisa-label {
margin: 0 0 0 27px;
}
}
.hide {
display: none;
}
}
.hide{
display: none;
}
.ant-form-vertical .ant-form-item{
flex-direction:row
}
}
.ruleModal{
.yisa-search{
.ruleModal {
.yisa-search {
margin: 20px 0 0 20px;
}
.line{
.line {
line-height: 49px;
}
.submitBtn{
.submitBtn {
text-align: center;
margin-top: 20px;
.submit{
.submit {
width: 80px;
height: 35px;
background: #409eff;
border: none;
border-radius: 4px;
cursor: pointer;
color: #fff;
}
.cancel{
width: 80px;
height: 35px;
background: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
margin-left: 20px;
height: 35px;
background: #409eff;
border: none;
border-radius: 4px;
cursor: pointer;
color: #fff;
}
.cancel {
width: 80px;
height: 35px;
background: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
margin-left: 20px;
}
}
}
.deleteModal{
.delete{
.deleteModal {
.delete {
text-align: center;
font-size: 18px;
}
.submitBtn{
.submitBtn {
text-align: center;
margin-top: 20px;
.submit{
.submit {
width: 80px;
height: 35px;
background: #409eff;
border: none;
border-radius: 4px;
cursor: pointer;
color: #fff;
}
.cancel{
width: 80px;
height: 35px;
background: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
margin-left: 20px;
height: 35px;
background: #409eff;
border: none;
border-radius: 4px;
cursor: pointer;
color: #fff;
}
.cancel {
width: 80px;
height: 35px;
background: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
margin-left: 20px;
}
}
}
.bindModal{
.bindModal {
width: 1000px !important;
.selectChange{
.selectChange {
text-align: center;
}
.patkPay{
.patkPay {
display: flex;
margin-top: 20px;
margin: 20px 0 0 20px;
.bind{
.bind {
margin-left: 20px;
.colorBtn{
.colorBtn {
height: 36px;
}
}
}
.bindTable{
.bindTable {
margin-top: 30px;
}
.ant-table-thead .ant-table-cell{
.ant-table-thead .ant-table-cell {
background-color: #616b83 !important;
color: #ffffff !important;
font-size: 14px;
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
font-weight: 700;
color: #ffffff !important;
font-size: 14px;
font-family:
Microsoft YaHei,
Microsoft YaHei-Bold;
font-weight: 700;
text-align: center;
border-right: none !important;
border-top-color: #888f9d !important;
border-color: #888f9d !important;
}
.ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table, .ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table{
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table,
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table {
border-top: none !important;
border-left: none !important;
}
.ant-table-tbody>tr.ant-table-placeholder:hover>td{
.ant-table-tbody > tr.ant-table-placeholder:hover > td {
background: none !important;
}
.ant-table-tbody .ant-table-row .ant-table-cell{
.ant-table-tbody .ant-table-row .ant-table-cell {
background-color: #3e4557 !important;
color: #ffffff !important;
text-align: center;
font-size: 14px;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-family:
Microsoft YaHei,
Microsoft YaHei-Regular;
font-weight: 400;
border-right: none !important;
border-left: none !important;
border-bottom-color: #626b7e !important;
}
.bind-btn{
.bind-btn {
margin-top: 20px;
display: flex;
.bindBtn{
.bindBtn {
margin-left: 30%;
.colorReset{
.colorReset {
margin-left: 30px;
}
}
}
.bind-content{
.content{
.bind-content {
.content {
width: 200px;
max-height: 100px;
background-color: #3e4557;
margin-left: 84px;
overflow: hidden;
overflow: scroll;
.bind-nav{
.bind-nav {
height: 25px;
line-height: 25px;
}
.bind-nav:hover{
.bind-nav:hover {
cursor: pointer;
background-color: #3aa8fe;
}
}
.content::-webkit-scrollbar {
width: 3px;
}
}
}
}
}

98
src/pages/SystemMgm/OrgnizationMgm/loadable.jsx
View File

@ -1,5 +1,5 @@
import React, { useState, useRef, useEffect, useMemo } from "react";
import { message, Input, Upload, Modal, Space, Tree, Tabs, Form, Select, Button, Cascader } from "antd";
import { message, Input, Upload, Modal, Space, Tree, Tabs, Form, Select, Button, Cascader } from "antd";
import { DeleteOutlined, EditOutlined, PlusCircleOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import ajax from "@/services"
import "./index.scss";
@ -22,7 +22,7 @@ function OrgnizationMgm() {
const [tabActive, setTabActive] = useState("1")
const [orgModalVisible, setOrgModalVisible] = useState(false) //组织树新增&修改弹窗
const [orgEditStatus, setOrgEditStatus] = useState(true) //组织树新增修改状态
const [activeOrgTree, setActiveOrgTree] = useState({isTop: true})
const [activeOrgTree, setActiveOrgTree] = useState({ isTop: true })
const [baseForm] = Form.useForm()
const [orgForm] = Form.useForm()
@ -31,7 +31,7 @@ function OrgnizationMgm() {
}
const getAreaTree = () => {
ajax.getAreaTree().then((e) => {
ajax.getDepartName().then((e) => {
if (e.status == 20000) {
setAreaTree(e.data)
setDefaultTreeActiveKey([e.data[0].id])
@ -42,7 +42,7 @@ function OrgnizationMgm() {
const ajaxGetOrgDetail = (id) => {
handleCancel()
return new Promise((resolved, rejected) => {
ajax.getOrgDetail({id: id}).then((e) => {
ajax.getOrgDetail({ id: id }).then((e) => {
if (e.status == 20000) {
resolved(e.data)
} else {
@ -55,7 +55,7 @@ function OrgnizationMgm() {
}
const getRoleTree = (id) => {
ajax.getOrgRoleNodeList({id: id}).then((e) => {
ajax.getOrgRoleNodeList({ id: id }).then((e) => {
if (e.status == 20000) {
setRoleTree(e.data)
}
@ -68,11 +68,11 @@ function OrgnizationMgm() {
testTemp = e.data
recursionTree(testTemp)
setOrgTree(testTemp)
handleTreeClick(undefined, {node: testTemp[0]})
handleTreeClick(undefined, { node: testTemp[0] })
}
})
}
const handleOrgAdd = (e, {isTop, level, pid, id, name}) => {
const handleOrgAdd = (e, { isTop, level, pid, id, name }) => {
e.stopPropagation()
e.nativeEvent.stopImmediatePropagation()
orgForm.setFieldsValue({
@ -83,16 +83,16 @@ function OrgnizationMgm() {
})
setOrgModalVisible(true)
setOrgEditStatus(false)
}
const handleOrgDel = (e, {name, id}) => {
const handleOrgDel = (e, { name, id }) => {
e.stopPropagation()
e.nativeEvent.stopImmediatePropagation()
Modal.confirm({
title: '确认删除',
content: `是否确认删除组织: ${name} ?`,
onOk: () => {
ajax.delAreaTree({id: id}).then((e) => {
ajax.delAreaTree({ id: id }).then((e) => {
if (e.status == 20000) {
message.success(e.message)
getAreaTree()
@ -103,7 +103,8 @@ function OrgnizationMgm() {
}
})
}
const handleOrgEdit = (e, {isTop, level, pid, id, name}) => {
const handleOrgEdit = (e, { isTop, level, pid, id, name }) => {
console.log(isTop);
e.stopPropagation()
e.nativeEvent.stopImmediatePropagation()
orgForm.setFieldsValue({
@ -111,7 +112,7 @@ function OrgnizationMgm() {
'depart_id': pid ? [pid, id] : [id],
'name': name
})
setActiveOrgTree({isTop: isTop})
setActiveOrgTree({ isTop: isTop })
setOrgModalVisible(true)
setOrgEditStatus(true)
}
@ -130,7 +131,7 @@ function OrgnizationMgm() {
})
}
const ajaxOrgRoleSave = ({id, role}) => {
const ajaxOrgRoleSave = ({ id, role }) => {
return new Promise((resloved, rejected) => {
ajax.saveOrgRoleNode({
id: id,
@ -138,6 +139,9 @@ function OrgnizationMgm() {
}).then((e) => {
if (e.status == 20000) {
resloved(e.message)
message.success(e.message)
}else{
message.error(e.message)
}
}).catch((err) => {
rejected(err)
@ -150,6 +154,9 @@ function OrgnizationMgm() {
ajax.saveAreaTree(data).then((e) => {
if (e.status == 20000) {
resolved(e.message)
message.success(e.message)
}else{
message.error(e.message)
}
}).catch((err) => {
rejected(err)
@ -162,6 +169,9 @@ function OrgnizationMgm() {
ajax.editAreaTree(data).then((e) => {
if (e.status == 20000) {
resolved(e.message)
message.success(e.message)
}else{
message.error(e.message)
}
}).catch((err) => {
rejected(err)
@ -169,7 +179,7 @@ function OrgnizationMgm() {
})
}
const handleTreeClick = (e, {node}) => {
const handleTreeClick = (e, { node }) => {
// 第三层级不予配置
if (node.level > 2) {
@ -208,14 +218,14 @@ function OrgnizationMgm() {
const uploadButton = (
<div>
{imgUploading ? <LoadingOutlined /> : <PlusOutlined />}
<div
style={{
marginTop: 4,
}}
>
点击上传
</div>
{imgUploading ? <LoadingOutlined /> : <PlusOutlined />}
<div
style={{
marginTop: 4,
}}
>
点击上传
</div>
</div>
)
@ -224,7 +234,7 @@ function OrgnizationMgm() {
return true
}
const handleUploadChange = ({file}) => {
const handleUploadChange = ({ file }) => {
const res = file.response
if (res && res.status == 20000) {
baseForm.setFieldValue('img_url', res.data)
@ -238,7 +248,7 @@ function OrgnizationMgm() {
}
const recursionTree = (treeData, pid) => {
treeData.map((item) => {
treeData.map((item) => {
item.ids += '-' + pid
if (item.children) {
recursionTree(item.children, item.id)
@ -288,11 +298,15 @@ function OrgnizationMgm() {
const handleOrgConfirm = () => {
orgForm.validateFields().then((data) => {
let arr =data.depart_id
console.log(arr);
// let strArr=arr.map(num=>parseInt(num))
console.log(arr.at(-2));
if (data.id) {
ajaxAreaEdit(Object.assign({}, {
id: data.id,
name: data.name,
pid: [...data.depart_id].pop()
pid: arr.at(-1)
})).then((msg) => {
message.success(msg)
setOrgModalVisible(false)
@ -303,7 +317,7 @@ function OrgnizationMgm() {
} else {
ajaxAreaSave(Object.assign({}, {
name: data.name,
pid: [...data.depart_id].pop(),
pid:arr.at(-1),
level: data.level
})).then((msg) => {
message.success(msg)
@ -344,10 +358,10 @@ function OrgnizationMgm() {
<Form.Item name="id" hidden></Form.Item>
<Form.Item name="name" hidden></Form.Item>
<Form.Item label="机构名称" name="name">
<Space/><Space/>{activeOrg.name}
<Space /><Space />{activeOrg.name}
</Form.Item>
<Form.Item label="平台名称" name="platform">
<Input disabled={!editStatus}/>
<Input disabled={!editStatus} />
</Form.Item>
<Form.Item label="平台logo" name="img_url">
<Upload
@ -430,23 +444,27 @@ function OrgnizationMgm() {
// getRoleTree()
}, [])
const treeTitleRender = ({name, children, level, pid, id, virtually_code, lng_lat, code}) => {
const treeTitleRender = ({ name, children, level, pid, id, virtually_code, lng_lat, code }) => {
return <>
<span className='label-text'>{name}</span>
<span className='label-text'>{name}</span>
{
level === 1 ? <>
<PlusCircleOutlined className='label-icon' onClick={(e) => handleOrgAdd(e, { level, pid, isTop: false, id, name })} />
<EditOutlined className="label-icon" onClick={(e) => handleOrgEdit(e, { level, pid, isTop: true, id, name })} />
</> :''
}
{
level > 2 ? <>
<PlusCircleOutlined className='label-icon' onClick={(e) => handleOrgAdd(e, {level, pid, isTop: true, id, name})} />
<EditOutlined className="label-icon" onClick={(e) => handleOrgEdit(e, {level, pid, isTop: false, id, name})}/>
<DeleteOutlined className="label-icon" onClick={(e) => handleOrgDel(e, {name, id})} />
</> : <>
<PlusCircleOutlined className='label-icon' onClick={(e) => handleOrgAdd(e, {level, pid, isTop: false, id, name})} />
<EditOutlined className="label-icon" onClick={(e) => handleOrgEdit(e, {level, pid, isTop: true, id, name})}/>
</>
level >= 2 ? <>
<PlusCircleOutlined className='label-icon' onClick={(e) => handleOrgAdd(e, { level, pid, isTop: true, id, name })} />
<EditOutlined className="label-icon" onClick={(e) => handleOrgEdit(e, { level, pid, isTop: false, id, name })} />
<DeleteOutlined className="label-icon" onClick={(e) => handleOrgDel(e, { name, id })} />
</>:''
}
</>
}
return <>
return <>
<div className="orgnization-container">
<div className="org-tree-container">
<Tree
@ -464,7 +482,7 @@ function OrgnizationMgm() {
<Tabs
defaultActiveKey="1"
onChange={(v) => setTabActive(v)}
items={Object.keys(activeOrg).length ? (activeOrg.level < 3 ? tabRender : null) : null }
items={Object.keys(activeOrg).length ? (activeOrg.level < 3 ? tabRender : null) : null}
/>
{
Object.keys(activeOrg).length ? (

Write Preview
Loading…
Cancel
Save