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