8 changed files with 1116 additions and 130 deletions
@ -1,21 +1,306 @@ |
|||||
<template> |
<template> |
||||
<div class=''></div> |
<div class='g-main'> |
||||
|
<el-form :model="form"> |
||||
|
<template v-for="itemj in formList"> |
||||
|
<section class="f-flex" style="flex-wrap: wrap;"> |
||||
|
<el-form-item v-for="(itemk, index) in itemj.children" :key="index" label-width="160px" |
||||
|
:label="itemk.label" :class="itemk.itemType == 'textarea' ? 'textareaDidth' : ''"> |
||||
|
<template v-if="itemk.itemType == 'radio1'"> |
||||
|
<section class="list_item_width_1"> |
||||
|
<el-radio v-for="ns in itemk.opction" :key="ns.value" size="small" |
||||
|
v-model.trim="form[itemj.id][itemk.formName]" :label="ns.value"> |
||||
|
{{ ns.label }} |
||||
|
</el-radio> |
||||
|
</section> |
||||
|
</template> |
||||
|
<template v-else-if="itemk.itemType == 'select1' && itemk.showFlag !== '0'"> |
||||
|
<el-select v-model="form[itemj.id][itemk.formName]" :placeholder="`请选择${itemk.label}`" |
||||
|
size="small" :multiple="itemk.multiple" :collapse-tags="itemk.collapseTags" clearable |
||||
|
:style="{ 'width': itemk.formName == 'specialCategoryCode' ? '183px' : '' }" |
||||
|
class="list_item_width_1"> |
||||
|
<el-option v-for="items in itemk.opction" :key="items.value" :label="items.label" |
||||
|
:value="items.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</template> |
||||
|
<template v-else-if="itemk.itemType == 'textarea1'"> |
||||
|
<el-input type="textarea" :placeholder="`请输入${itemk.label}`" class="item-width-textarea" |
||||
|
maxlength="120" size="small" show-word-limit resize="none" rows="3" |
||||
|
v-model.trim="form[itemj.id][itemk.formName]"> |
||||
|
</el-input> |
||||
|
</template> |
||||
|
<template v-else-if="itemk.itemType == 'input1'"> |
||||
|
<el-input :placeholder="`请输入${itemk.label}`" class="list_item_width_1" size="small" |
||||
|
:style="{ 'margin-right': itemk.label == '备注' ? '50px' : '' }" |
||||
|
v-model.trim="form[itemj.id][itemk.formName]" clearable> |
||||
|
</el-input> |
||||
|
</template> |
||||
|
<template v-else-if="itemk.itemType == 'inputNum'"> |
||||
|
<el-input :placeholder="`请输入${itemk.label}`" size="small" class="list_item_width_1-text" |
||||
|
:style="{ 'margin-right': itemk.label == '备注' ? '50px' : '' }" |
||||
|
v-model.trim="form[itemj.id][itemk.formName]" clearable |
||||
|
@blur="checkNumberInput(itemj.id, itemk.formName)"> |
||||
|
</el-input><span class="u-data-tag">元</span> |
||||
|
</template> |
||||
|
<template v-else-if="itemk.itemType == 'checkbox'"> |
||||
|
<el-checkbox-group size="small" v-model="form[itemj.id][itemk.formName]"> |
||||
|
<el-checkbox v-for="items in itemk.opction" :label="items.value" |
||||
|
:style="{ 'margin-right': items.label != itemk.label ? '' : '19px' }" :key="items.value" |
||||
|
:value="items.value">{{ items.label }}</el-checkbox> |
||||
|
</el-checkbox-group> |
||||
|
</template> |
||||
|
<template v-else-if="itemk.itemType == 'datepicker1' && itemk.showFlag !== '0'"> |
||||
|
<el-date-picker v-model.trim="form[itemj.id][itemk.formName]" class="list_item_width_1" |
||||
|
type="date" size="small" clearable placeholder="选择日期" format="yyyy 年 MM 月 dd 日" |
||||
|
value-format="yyyy-MM-dd"> |
||||
|
</el-date-picker> |
||||
|
</template> |
||||
|
<template v-else-if="itemk.itemType == 'cascader1'"> |
||||
|
<el-cascader v-model="form[itemj.id].partyOrgId" :props="casProps" :options="itemk.opction" |
||||
|
class="list_item_width_1" clearable size="small" |
||||
|
@change="handlePartyOrgCascadarChange"></el-cascader> |
||||
|
</template> |
||||
|
<template v-else-if="itemk.itemType == 'number'"> |
||||
|
<el-input-number class="list_item_width_1" size="small" :min="1" :max="10" |
||||
|
v-model.trim="form[itemj.id][itemk.formName]"></el-input-number> |
||||
|
</template> |
||||
|
|
||||
|
</el-form-item> |
||||
|
</section> |
||||
|
</template> |
||||
|
</el-form> |
||||
|
<el-row style="margin:24px"> |
||||
|
<el-col :span="24" align="center"> |
||||
|
<el-button size="small" class="diy-button--white" @click="handlerCancle" plain>取消</el-button> |
||||
|
<el-button type="primary" size="small" @click="handleClickSUbmitExpand">保存</el-button> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
import { requestPost, requestGet } from "@/js/dai/request"; |
||||
|
|
||||
export default { |
export default { |
||||
data() { |
data() { |
||||
return {}; |
return { |
||||
|
formType: null, |
||||
|
formList: [], |
||||
|
form: { |
||||
|
// 党员信息 |
||||
|
parymemberInfoDto: { |
||||
|
joinTime: null, |
||||
|
positiveTime: null, |
||||
|
partyOrgId: null, |
||||
|
flowFlag: null, |
||||
|
flowActNum: null, |
||||
|
partyJob: null, |
||||
|
duty: null, |
||||
|
retiredFlag: null, |
||||
|
centerFlag: null, |
||||
|
studyNotNeed: null, |
||||
|
joinBranchName: null, |
||||
|
joinCommunityTime: null |
||||
|
}, |
||||
|
// 残疾信息 |
||||
|
healthDto: { |
||||
|
disabilityCategoryCode: null, |
||||
|
disabilityLevel: null, |
||||
|
disabilityNum: null, |
||||
|
disabilityDesc: null, |
||||
|
guardianFlag: null, |
||||
|
guardianName: null, |
||||
|
specialSkillFlag: null, |
||||
|
workCapacityFlag: null |
||||
|
}, |
||||
|
// 大病信息 |
||||
|
seriousIllnessDto: { |
||||
|
illnessCode: null |
||||
|
}, |
||||
|
// 慢病信息 |
||||
|
chronicDiseaseDto: { |
||||
|
chronicDiseaseCode: null |
||||
|
}, |
||||
|
// 死亡信息 |
||||
|
deathDto: { |
||||
|
deathTime: null |
||||
|
}, |
||||
|
// 老年人 |
||||
|
oldPeopleDto: { |
||||
|
oldPeopleType: null |
||||
|
}, |
||||
|
// 低保人员 |
||||
|
subsistenceAllowanceDto: { |
||||
|
subsistenceAllowanceType: null, |
||||
|
subsistenceAllowanceCause: null |
||||
|
}, |
||||
|
// 退役军人 |
||||
|
veteranDto: { |
||||
|
joinArmyTime: null, |
||||
|
leaveArmyTime: null, |
||||
|
serviceUnit: null, |
||||
|
receiveUnit: null, |
||||
|
settlementAmount: null, |
||||
|
trainDesc: null, |
||||
|
employmentSituation: null, |
||||
|
pubWelfareJobFlag: null |
||||
|
}, |
||||
|
// 保障房人员 |
||||
|
ensureHouseDto: { |
||||
|
community: null, |
||||
|
housingNature: null |
||||
|
}, |
||||
|
// 统战人员 |
||||
|
unitedFrontDto: { |
||||
|
unitedFrontType: null |
||||
|
}, |
||||
|
//特扶人员 |
||||
|
specialSupportDto: { |
||||
|
specialSupportType: null,//特扶类别 |
||||
|
childName: null,//子女姓名 |
||||
|
childGender: null,//子女性别 |
||||
|
childDeathDate: null,//子女死亡日期 |
||||
|
childDisabilityCategoyCode: null,//伤残类别 |
||||
|
childDisabilityLevel: null,//伤残等级 |
||||
|
}, |
||||
|
// 志愿者 |
||||
|
volunteerDto: { |
||||
|
volunteerCategory: null |
||||
|
} |
||||
|
}, |
||||
|
casProps: { |
||||
|
value: 'id', |
||||
|
label: 'partyOrgName', |
||||
|
lazy: true, |
||||
|
lazyLoad: (node, resolve) => { |
||||
|
this.handleNextOrgTreeClick(node, resolve) |
||||
|
}, |
||||
|
isLeaf: (data, node) => { |
||||
|
console.log(data); |
||||
|
//根据后台返回的数据判断是否还有下级 是否显示箭头图标 |
||||
|
//el-tree懒加载无子级数据时去掉下拉箭头 |
||||
|
if (data.partyOrgLevel == 7 || data.childrenQty == 0) { |
||||
|
return true |
||||
|
} |
||||
|
}, |
||||
|
checkStrictly: true, |
||||
|
multiple: false, |
||||
|
}, |
||||
|
}; |
||||
}, |
}, |
||||
// 群里之前谁碰到过一个单选框的事来着? |
props: {}, |
||||
created() {}, |
created() { |
||||
methods: {}, |
this.getOrgTree() |
||||
components:{}, |
}, |
||||
computed:{}, |
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
const promises = this.formList.map(async (group) => { |
||||
|
return group.children.reduce(async (accPromise, item) => { |
||||
|
const acc = await accPromise; |
||||
|
acc[item.formName] = null; |
||||
|
if (item.opctionUrl) { |
||||
|
try { |
||||
|
item.opction = await this.getDictDataForm(item.opctionUrl, item.opctionParams); |
||||
|
} catch (error) { |
||||
|
console.error('Error fetching options:', error); |
||||
|
} |
||||
|
} |
||||
|
return acc; |
||||
|
}, Promise.resolve({})); |
||||
|
}); |
||||
|
|
||||
|
Promise.all(promises).then((results) => { |
||||
|
}).catch((error) => { |
||||
|
console.error('Error fetching options:', error); |
||||
|
}); |
||||
|
console.log(this.form, 'form'); |
||||
|
console.log(this.formList, 'formList'); |
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
async getDictDataForm(url, params) { |
||||
|
try { |
||||
|
const { data } = await this.$http.post(url, params); |
||||
|
return data.data; |
||||
|
} catch (error) { |
||||
|
console.log(error, `获取 ${opctionParams.dictType} 字典`); |
||||
|
} |
||||
|
}, |
||||
|
handlerCancle() { |
||||
|
this.$emit('hideExpand', this.formType) |
||||
|
}, |
||||
|
handleClickSUbmitExpand() { |
||||
|
console.log(this.form.parymemberInfoDto, '子组件提交的'); |
||||
|
this.$emit('submitExpand', this.form, this.formType) |
||||
|
}, |
||||
|
handlePartyOrgCascadarChange(selectedNode) { |
||||
|
this.form.parymemberInfoDto.partyOrgId = selectedNode[selectedNode.length - 1]; |
||||
|
}, |
||||
|
async handleNextOrgTreeClick(node, resolve) { |
||||
|
await this.getTreeChildenList(node, resolve) |
||||
|
}, |
||||
|
async getTreeChildenList(node, resolve) { |
||||
|
if (node.data.partyOrgLevel === 7) { |
||||
|
resolve(null); |
||||
|
return; |
||||
|
} |
||||
|
const url = "/actual/base/party/org/listNextLevelPartyOrgTreeNodesByPid" |
||||
|
let params = { |
||||
|
partyOrgPid: node.data.id |
||||
|
} |
||||
|
const { data, code, msg } = await requestGet(url, params) |
||||
|
if (code === 0) { |
||||
|
data.forEach(item => { |
||||
|
item.children = null; |
||||
|
item.leaf = item.partyOrgLevel === 7 || item.childrenQty === 0 |
||||
|
}); |
||||
|
resolve(data) |
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
}, |
||||
|
async getOrgTree() { |
||||
|
try { |
||||
|
const { data } = await requestGet('/actual/base/party/org/listPartyOrgTreeRoot4Select', { depth: 8 }) |
||||
|
this.formList.forEach(c => { |
||||
|
for (let i of c.children) { |
||||
|
if (i.formName == 'partyOrgId') { |
||||
|
i.opction = [data]; |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
console.log(error); |
||||
|
} |
||||
|
}, |
||||
|
async getdisabilityDict() { |
||||
|
await this.getDictData('disability_category_code', 'disabilityCategoryCode') |
||||
|
}, |
||||
|
// 底部form 运营端控制字典统一调用 |
||||
|
async getDictData(dictType, formName) { |
||||
|
|
||||
|
try { |
||||
|
const { data } = await this.$http.post('sys/dict/data/dictlist', { 'dictType': dictType }); |
||||
|
this.footerInputList.forEach(c => { |
||||
|
for (let i of c.children) { |
||||
|
if (i.formName == formName) { |
||||
|
i.opction = data.data; |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
} catch (error) { |
||||
|
console.log(error, `获取 ${dictType} 字典`); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
components: {}, |
||||
|
computed: {}, |
||||
watch: {}, |
watch: {}, |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
<style lang='scss' scoped> |
||||
|
@import "@/assets/scss/modules/management/list-main.scss"; |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue