LL
4 months ago
8 changed files with 4143 additions and 627 deletions
File diff suppressed because it is too large
@ -0,0 +1,66 @@ |
|||
<template> |
|||
<el-dialog :title="title" :visible.sync="visible" append-to-body :before-close="handleClose"> |
|||
<el-form :model="form" :rules="rules" ref="checkPasswordFrom" label-width="60px"> |
|||
<el-form-item label="密码" prop="password"> |
|||
<el-input v-model.trim="form.password" autocomplete="off" type="password" placeholder="请输入当前账号密码" |
|||
@keydown.native.enter="handelClickCheckPassword"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="handleClose">取 消</el-button> |
|||
<el-button type="primary" @click="handelClickCheckPassword">确 定</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "keyPerCheckPassword", |
|||
props: { |
|||
title: { |
|||
type: String, |
|||
default: "密码验证" |
|||
}, |
|||
visible: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
form: { |
|||
password: '' |
|||
}, |
|||
rules: { |
|||
password: [ |
|||
{ required: true, message: "请输入密码", trigger: "blur" }, |
|||
{ |
|||
min: 6, |
|||
max: 18, |
|||
message: "长度在 6 到 18 个字符", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
}, |
|||
} |
|||
}, |
|||
methods: { |
|||
handelClickCheckPassword() { |
|||
this.$refs.checkPasswordFrom.validate(valid => { |
|||
if (valid) { |
|||
this.$emit("success", this.form.password); |
|||
this.handleClose(); |
|||
} |
|||
}); |
|||
}, |
|||
handleClose() { |
|||
this.form.password = ""; |
|||
this.$emit("update:visible", false); |
|||
}, |
|||
} |
|||
|
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
@ -1,471 +0,0 @@ |
|||
<template> |
|||
<el-dialog :visible.sync="visible" :title="title" :close-on-click-modal="false" :close-on-press-escape="false" |
|||
width="950px" top="5vh" class="dialog-h" :before-close="handleCancel"> |
|||
<div class="dialog-h-content scroll-h"> |
|||
<el-form ref="ref_form" :inline="true" :model="formData" :disabled="title == '查看'" :rules="dataRule" class="form"> |
|||
<!-- <el-form-item label="居民分类" label-width="150px" prop="categoryList"> |
|||
<el-cascader ref="categoryAll" size="small" class="item_width_1 custom-cascader" |
|||
v-model.trim="formData.categoryList" :options="categoryAllList" |
|||
:props="{ multiple: true, checkStrictly: true, emitPath: false }" clearable></el-cascader> |
|||
</el-form-item> --> |
|||
|
|||
<el-form-item label="类别名称" prop="importantName" label-width="150px"> |
|||
<el-input v-model.trim="formData.importantName" size="small" clearable placeholder="请输入" |
|||
class="item_width_1"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item class="full" label="居民分类" label-width="150px" prop="categoryList"> |
|||
<el-table border ref="tableBox" :data="tableData" :row-style="{ height: '50px' }" |
|||
:cell-style="{ padding: '0px' }" style="width: 100%"> |
|||
<el-table-column prop="province" label="标签" width="120" align="center"> |
|||
</el-table-column> |
|||
<el-table-column prop="city" label="内容" align="left" show-overflow-tooltip> |
|||
<template slot-scope="scope"> |
|||
<div v-if="scope.row.type == 'radio'" style="white-space: normal; word-break: break-all;"> |
|||
<el-radio-group v-model.trim="scope.row.value" v-for="(item, index) in scope.row.option" :key="index" |
|||
@change="handleClickRadio(index, scope.$index)"> |
|||
<el-radio :label="item.value" :disabled="item.disabled"><span |
|||
style="margin-right: 50px;" :value="item.value">{{ item.label |
|||
}}</span></el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<div v-if="scope.row.type == 'checkbox'" :prop="'tableData.' + scope.$index + '.value'" |
|||
style="white-space: normal; word-break: break-all;"> |
|||
<el-checkbox-group v-model.trim="scope.row.value"> |
|||
<el-checkbox @change="(val) => handleClickCheckbox(val, item)" |
|||
:disabled="item.disabled" v-for="(item, index) in scope.row.option" |
|||
:key="index" :label="item.value">{{ item.label |
|||
}}</el-checkbox> |
|||
</el-checkbox-group> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<div class="div_btn"> |
|||
<el-button size="small" @click="handleCancel" :loading="btnDisable">取 消</el-button> |
|||
<el-button size="small" type="primary" :loading="btnDisable" @click="handleConfirm">确 定</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import _ from 'lodash' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
import { categoryAllList } from '@/utils/enum.js'; |
|||
import { requestGet } from "@/js/dai/request"; |
|||
|
|||
const defaultFormData = { |
|||
id: undefined, |
|||
importType: 'normal', |
|||
importantName: '', |
|||
categoryList: [] |
|||
} |
|||
|
|||
const defaultTableData = [ |
|||
{ |
|||
index: 0, |
|||
province: '政治面貌', |
|||
value: 0, |
|||
type: 'radio', |
|||
option: [ |
|||
{ label: '群众', value: 'partyFlag0' }, |
|||
{ label: '党员', value: 'partyFlag1' }, |
|||
{ label: '共青团员', value: 'partyFlag2' }, |
|||
] |
|||
}, |
|||
{ |
|||
index: 1, |
|||
province: '健康状态', |
|||
value: [], |
|||
type: 'checkbox', |
|||
option: [ |
|||
{ |
|||
label: '残疾', |
|||
value: 'DISABILITY_FLAG' |
|||
}, |
|||
{ |
|||
label: '大病', |
|||
value: 'SERIOUS_ILLNESS_FLAG' |
|||
}, |
|||
{ |
|||
label: '慢病', |
|||
value: 'CHRONIC_DISEASE_FLAG' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
index: 2, |
|||
province: '关注人群', |
|||
value: [], |
|||
type: 'checkbox', |
|||
option: [ |
|||
{ |
|||
label: '老年人', |
|||
value: 'OLD_PEOPLE_FLAG', |
|||
}, |
|||
// { |
|||
// label: "失能老人", |
|||
// value: "DISABLED_FLAG", |
|||
// }, |
|||
// { |
|||
// label: "空巢老人", |
|||
// value: "EMPTY_NESTER_FLAG", |
|||
// }, |
|||
// { |
|||
// label: "失智老人", |
|||
// value: "DEMENTED_FLAG", |
|||
// }, |
|||
// { |
|||
// label: "独居老人", |
|||
// value: "LIVE_ALONE_FLAG", |
|||
// }, |
|||
// { |
|||
// label: "普通老年人", |
|||
// value: "OLD_PEOPLE_FLAG", |
|||
// }, |
|||
{ |
|||
label: '低保', |
|||
value: 'SUBSISTENCE_ALLOWANCE_FLAG' |
|||
}, |
|||
{ |
|||
label: '退役军人', |
|||
value: 'VETERAN_FLAG' |
|||
}, |
|||
{ |
|||
label: '保障房人员', |
|||
value: 'ENSURE_HOUSE_FLAG' |
|||
}, |
|||
{ |
|||
label: '育龄妇女', |
|||
value: 'FERTILE_WOMAN_FLAG' |
|||
}, |
|||
{ |
|||
label: '特扶人员', |
|||
value: 'SPECIAL_SUPPORT_FLAG' |
|||
}, { |
|||
label: '留守儿童', |
|||
value: 'LBC_FLAG' |
|||
}, { |
|||
label: '艾滋病人员', |
|||
value: 'AIDS_FLAG' |
|||
}, { |
|||
label: '流动人员', |
|||
value: 'FLOATING_FLAG' |
|||
}, { |
|||
label: '新阶层人士', |
|||
value: 'NEW_STRATUM_FLAG' |
|||
}, { |
|||
label: '新就业群体', |
|||
value: 'NEG_FLAG' |
|||
}, { |
|||
label: '失业人员', |
|||
value: 'UNEMPLOYED_FLAG' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
index: 3, |
|||
province: '特殊人群', |
|||
value: [], |
|||
type: 'checkbox', |
|||
option: [] |
|||
}, |
|||
{ |
|||
index: 4, |
|||
province: '身份', |
|||
value: [], |
|||
type: 'checkbox', |
|||
option: [ |
|||
{ |
|||
label: '志愿者', |
|||
value: 'VOLUNTEER_FLAG' |
|||
}, |
|||
{ |
|||
label: '网格员', |
|||
value: 'GRID_MEMBER_FLAG' |
|||
}, |
|||
{ |
|||
label: '楼长', |
|||
value: 'BUILDING_CHIEF_FLAG' |
|||
}, |
|||
{ |
|||
label: '单元长', |
|||
value: 'UNIT_CHIEF_FLAG' |
|||
}, |
|||
{ |
|||
label: '公益岗', |
|||
value: 'PUBLIC_WELFARE_FLAG' |
|||
} |
|||
] |
|||
}, |
|||
]; |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
name: 'revitalizeDialog', |
|||
components: {}, |
|||
props: { |
|||
visible: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
title: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
categoryAllList: _.cloneDeep(categoryAllList), |
|||
formData: _.cloneDeep(defaultFormData), |
|||
btnDisable: false, |
|||
tableData: _.cloneDeep(defaultTableData), |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
async initForm(row) { |
|||
const { data } = await requestPost('/sys/dict/data/dictlist', { dictType: 'special_resident_category' }); |
|||
this.tableData[3].option = data; |
|||
if (row && row.id) { |
|||
this.startLoading() |
|||
let url = `/actual/base/residentCategoryImportant/detail/${row.id}` |
|||
const { data, code, msg } = await requestGet(url) |
|||
this.formData = data ? data : _.cloneDeep(defaultFormData) |
|||
// 根据categoryCodeList设置option.selected为true并赋值给radio/checkbox |
|||
if (data && data.categoryCodeList) { |
|||
this.tableData.forEach(row => { |
|||
// 处理单选框 |
|||
if (row.type === 'radio') { |
|||
const matchedItem = row.option.find(item => data.categoryCodeList.includes(item.value)); |
|||
if (matchedItem) { |
|||
row.value = matchedItem.value; |
|||
matchedItem.selected = true; |
|||
} |
|||
} |
|||
// 处理复选框 |
|||
else if (row.type === 'checkbox') { |
|||
row.value = row.option |
|||
.filter(item => data.categoryCodeList.includes(item.value)) |
|||
.map(item => item.value); |
|||
} |
|||
|
|||
// 设置selected状态 |
|||
row.option.forEach(item => { |
|||
item.selected = data.categoryCodeList.includes(item.value); |
|||
}); |
|||
}); |
|||
this.handleCategoryList(); |
|||
} |
|||
this.endLoading() |
|||
} |
|||
}, |
|||
|
|||
handleClickRadio(index, rowIndex) { |
|||
this.tableData[rowIndex].option.forEach((item, i) => { |
|||
if (i === index) item.selected = true |
|||
else item.selected = false |
|||
}) |
|||
this.handleCategoryList(); |
|||
}, |
|||
handleClickCheckbox(val, item) { |
|||
item.selected = val; |
|||
this.handleCategoryList(); |
|||
// item.index = index; |
|||
// if (event) { |
|||
// this.$emit('showDialog', item, event) |
|||
// } else { |
|||
// this.$confirm(`确认取消${item.label}标签`, '确认信息', { |
|||
// confirmButtonText: '确认取消', |
|||
// cancelButtonText: '暂不取消', |
|||
// type: 'warning' |
|||
// }).then(() => { |
|||
// this.$emit('showDialog', item, event) |
|||
// }).catch(() => { |
|||
// this.formData.tableData[index].value.push(item.value) |
|||
// }); |
|||
// } |
|||
}, |
|||
|
|||
// 添加类别 |
|||
handleCategoryList() { |
|||
this.formData.categoryList = this.tableData.flatMap(row => |
|||
row.option.filter(item => item.selected).map(item => item.value) |
|||
); |
|||
console.log('this.formData.categoryList===', this.formData.categoryList) |
|||
this.$refs.ref_form.validateField('categoryList') |
|||
}, |
|||
async handleConfirm() { |
|||
this.$refs['ref_form'].validate(async valid => { |
|||
if (valid) { |
|||
this.btnDisable = true |
|||
let url = this.formData.id ? '/actual/base/residentCategoryImportant/update' : '/actual/base/residentCategoryImportant/create' |
|||
const { data, code, internalMsg } = await requestPost(url, this.formData) |
|||
if (code === 0) { |
|||
this.$message.success(this.formData.id ? '更新成功' : '新增成功') |
|||
this.resetData() |
|||
this.$emit('update:visible', false) |
|||
this.$emit('success') |
|||
} else { |
|||
this.$message.error(internalMsg) |
|||
} |
|||
this.btnDisable = false |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 取消 |
|||
handleCancel() { |
|||
this.resetData() |
|||
this.$emit('update:visible', false) |
|||
}, |
|||
|
|||
resetData() { |
|||
this.formData = _.cloneDeep(defaultFormData); |
|||
this.tableData = _.cloneDeep(defaultTableData); |
|||
this.$nextTick(() => { |
|||
this.$refs['ref_form'].resetFields(); |
|||
}) |
|||
}, |
|||
// 开启加载动画 |
|||
startLoading() { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading() { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
}, |
|||
// 更新分类标签 |
|||
updateCategoryTags() { |
|||
this.$nextTick(() => { |
|||
const cascaderEl = this.$refs.categoryAll.$el; |
|||
const tagsContainer = cascaderEl.querySelector('.el-cascader__tags'); |
|||
const tags = tagsContainer.querySelectorAll('.el-tag'); |
|||
|
|||
// 移除已存在的+n标签 |
|||
const moreTag = tagsContainer.querySelector('.el-tag-more'); |
|||
if (moreTag) { |
|||
moreTag.remove(); |
|||
} |
|||
|
|||
// 恢复所有标签显示 |
|||
tags.forEach(tag => { |
|||
tag.style.display = 'inline-block'; |
|||
}); |
|||
|
|||
// 计算可见标签数量 |
|||
let visibleCount = 0; |
|||
let containerWidth = tagsContainer.offsetWidth; |
|||
let totalWidth = 0; |
|||
const tagMargin = 7; |
|||
|
|||
for (let i = 0; i < tags.length; i++) { |
|||
const tag = tags[i]; |
|||
const tagWidth = tag.offsetWidth; |
|||
|
|||
// 第一个标签没有左边距 |
|||
const margin = i > 0 ? tagMargin : 0; |
|||
|
|||
if (totalWidth + tagWidth + margin > containerWidth && visibleCount > 0) { |
|||
break; |
|||
} |
|||
|
|||
totalWidth += tagWidth + margin; |
|||
visibleCount++; |
|||
} |
|||
|
|||
// 隐藏超出的标签并显示+n标签 |
|||
if (visibleCount < tags.length) { |
|||
const hiddenCount = tags.length - visibleCount; |
|||
|
|||
// 隐藏超出的标签（包括前面一个标签） |
|||
const startHideIndex = visibleCount > 0 ? visibleCount - 1 : 0; |
|||
for (let i = startHideIndex; i < tags.length; i++) { |
|||
tags[i].style.display = 'none'; |
|||
} |
|||
|
|||
// 创建+n标签 |
|||
const moreTag = document.createElement('span'); |
|||
moreTag.className = 'el-tag el-tag--info el-tag--mini el-tag--light el-tag-more'; |
|||
moreTag.textContent = `+${hiddenCount + (startHideIndex > 0 ? 1 : 0)}`; |
|||
moreTag.style.marginLeft = '8px'; |
|||
tagsContainer.appendChild(moreTag); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule() { |
|||
return { |
|||
categoryList: [ |
|||
{ required: true, message: '请选择分类', trigger: 'change' } |
|||
], |
|||
importantName: [ |
|||
{ required: true, message: '请输入类别名称', trigger: 'blur' } |
|||
], |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
watch: { |
|||
// 'formData.categoryList': { |
|||
// handler(newVal) { |
|||
// this.$nextTick(() => { |
|||
// this.updateCategoryTags() |
|||
// }) |
|||
// }, |
|||
// deep: true |
|||
// } |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped> |
|||
.form { |
|||
margin-top: 16px; |
|||
} |
|||
|
|||
.item_width_1 { |
|||
width: 560px; |
|||
|
|||
} |
|||
|
|||
.custom-cascader { |
|||
::v-deep .el-cascader__tags { |
|||
flex-wrap: nowrap; |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
|
|||
.full { |
|||
width: 100%; |
|||
display: flex; |
|||
|
|||
::v-deep .el-form-item__content { |
|||
flex: 1; |
|||
} |
|||
} |
|||
|
|||
.div_btn { |
|||
width: 100%; |
|||
text-align: right; |
|||
padding-right: 20px; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue