| | |
| | | <el-select v-model="form.labelsArr" style="width: 100%;" @change="changeLabel" multiple placeholder="请选择"> |
| | | <el-option |
| | | v-for="item in cateList" |
| | | :key="item.id" |
| | | :key="item.name" |
| | | :label="item.name" |
| | | :value="item.id"> |
| | | :value="item.name"> |
| | | </el-option> |
| | | </el-select> |
| | | <el-button size="medium" style="margin-left: 15px;" @click="$refs.tagLibrary.open('标签库')">标签库</el-button> |
| | | </div> |
| | | </el-form-item> |
| | | <el-form-item label="地区" prop="area"> |
| | | <el-form-item label="省份" prop="provinceId"> |
| | | <el-select v-model="form.provinceId" filterable @change="changeProvince" placeholder="请选择"> |
| | | <el-option |
| | | v-for="item in areas" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="城市" prop="cityId"> |
| | | <el-select v-model="form.cityId" clearablefilterable placeholder="请选择"> |
| | | <el-option |
| | | v-for="item in citys" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- <el-form-item label="地区" prop="area"> |
| | | <el-cascader |
| | | v-model="form.area" |
| | | :options="area" |
| | | @change="changeArea" |
| | | :props="{ label: 'name', children: 'childAreasList', value: 'id' }" /> |
| | | </el-form-item> |
| | | <el-form-item label="年份" prop="yearInfo"> |
| | | </el-form-item>--> |
| | | <el-form-item label="年份" prop="yearInfo" > |
| | | <el-date-picker |
| | | v-model="form.yearInfo" |
| | | type="year" |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import BaseOpera from '@/components/base/BaseOpera' |
| | | import GlobalWindow from '@/components/common/GlobalWindow' |
| | | import TagLibrary from '@/components/business/tagLibrary' |
| | | import { findTreeList, list } from '@/api/business/knowledge' |
| | | export default { |
| | | name: 'OperaKnowledgeWindow', |
| | | extends: BaseOpera, |
| | | components: { GlobalWindow, TagLibrary }, |
| | | data () { |
| | | return { |
| | | // 表单数据 |
| | | form: { |
| | | id: null, |
| | | provinceId: '', |
| | | cityId: '', |
| | | title: '', |
| | | link: '', |
| | | labels: '', |
| | | yearInfo: '', |
| | | area: [], |
| | | labelsArr: [] |
| | | }, |
| | | // 验证规则 |
| | | rules: { |
| | | title: [ |
| | | { required: true, message: '请输入内容', trigger: 'blur' } |
| | | ], |
| | | link: [ |
| | | { required: true, message: '请输入内容', trigger: 'blur' } |
| | | ] |
| | | }, |
| | | area: [], |
| | | cateList: [] |
| | | } |
| | | }, |
| | | created () { |
| | | this.config({ |
| | | api: '/business/knowledge', |
| | | 'field.id': 'id' |
| | | }) |
| | | |
| | | }, |
| | | methods: { |
| | | changeLabel(e) { |
| | | this.form.labels = e.join(',') |
| | | }, |
| | | changeArea(e) { |
| | | if (e.length === 0) return |
| | | if (e.length === 1) { |
| | | this.form.provinceId = e[0] |
| | | } else if (e.length === 2) { |
| | | this.form.provinceId = e[0] |
| | | this.form.cityId = e[1] |
| | | } |
| | | }, |
| | | open (title, target) { |
| | | this.getLabel() |
| | | this.getCityTree() |
| | | this.title = title |
| | | this.visible = true |
| | | // 新建 |
| | | if (target == null) { |
| | | this.$nextTick(() => { |
| | | this.$refs.form.resetFields() |
| | | this.form[this.configData['field.id']] = null |
| | | }) |
| | | return |
| | | } |
| | | // 编辑 |
| | | this.$nextTick(() => { |
| | | for (const key in this.form) { |
| | | this.form[key] = target[key] |
| | | } |
| | | if (this.form.labels) { |
| | | this.form.labelsArr = this.form.labels.split(',').map(item => Number(item)) |
| | | } |
| | | if (this.form.provinceId && this.form.cityId) { |
| | | this.form.area = [this.form.provinceId, this.form.cityId] |
| | | } else if (this.form.provinceId && !this.form.cityId) { |
| | | this.form.area = [this.form.provinceId] |
| | | } |
| | | }) |
| | | }, |
| | | async getLabel() { |
| | | this.cateList = await list() |
| | | }, |
| | | async getCityTree() { |
| | | this.area = await findTreeList({}) |
| | | this.setSecondLevelChildrenToNullPrecise(this.area); |
| | | this.area.forEach(item => { |
| | | if (item.childAreasList.length === 0) { |
| | | item.childAreasList = null |
| | | } |
| | | }) |
| | | }, |
| | | setSecondLevelChildrenToNullPrecise(data, level = 1) { |
| | | if (!data || !data.length) return; |
| | | |
| | | data.forEach(item => { |
| | | if (item.childAreasList && item.childAreasList.length) { |
| | | if (level === 1) { |
| | | // 这是第一级节点,处理其子节点(第二级) |
| | | item.childAreasList.forEach(child => { |
| | | child.childAreasList = null; |
| | | }); |
| | | } else { |
| | | // 继续递归处理更深层级 |
| | | this.setSecondLevelChildrenToNullPrecise(item.childAreasList, level + 1); |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | import BaseOpera from '@/components/base/BaseOpera' |
| | | import GlobalWindow from '@/components/common/GlobalWindow' |
| | | import TagLibrary from '@/components/business/tagLibrary' |
| | | import { findTreeList, list } from '@/api/business/knowledge' |
| | | export default { |
| | | name: 'OperaKnowledgeWindow', |
| | | extends: BaseOpera, |
| | | components: { GlobalWindow, TagLibrary }, |
| | | data () { |
| | | return { |
| | | // 表单数据 |
| | | form: { |
| | | id: null, |
| | | provinceId: '', |
| | | cityId: '', |
| | | title: '', |
| | | link: '', |
| | | labels: '', |
| | | yearInfo: '', |
| | | area: [], |
| | | labelsArr: [] |
| | | }, |
| | | areas: [], |
| | | citys: [], |
| | | // 验证规则 |
| | | rules: { |
| | | title: [ |
| | | { required: true, message: '请输入内容', trigger: 'blur' } |
| | | ], |
| | | yearInfo: [ |
| | | { required: true, message: '请选择年份', trigger: 'blur' } |
| | | ], |
| | | labelsArr: [ |
| | | { required: true, message: '请选择表情', trigger: 'blur' } |
| | | ], |
| | | provinceId: [ |
| | | { required: true, message: '请选择省份', trigger: 'blur' } |
| | | ], |
| | | link: [ |
| | | { required: true, message: '请输入内容', trigger: 'blur' } |
| | | ] |
| | | }, |
| | | area: [], |
| | | cateList: [] |
| | | } |
| | | }, |
| | | created () { |
| | | this.config({ |
| | | api: '/business/knowledge', |
| | | 'field.id': 'id' |
| | | }) |
| | | }, |
| | | methods: { |
| | | changeLabel (e) { |
| | | this.form.labels = e.join(',') |
| | | }, |
| | | changeArea (e) { |
| | | if (e.length === 0) return |
| | | if (e.length === 1) { |
| | | this.form.provinceId = e[0] |
| | | } else if (e.length === 2) { |
| | | this.form.provinceId = e[0] |
| | | this.form.cityId = e[1] |
| | | } |
| | | }, |
| | | changeProvince (e) { |
| | | this.citys = [] |
| | | this.form.cityId=null |
| | | this.areas.forEach(item => { |
| | | if (item.id === this.form.provinceId) { |
| | | this.citys = item.childAreasList || [] |
| | | } |
| | | }) |
| | | }, |
| | | open (title, target) { |
| | | this.getLabel() |
| | | this.getCityTreeList() |
| | | this.title = title |
| | | this.visible = true |
| | | // 新建 |
| | | if (target == null) { |
| | | this.$nextTick(() => { |
| | | this.$refs.form.resetFields() |
| | | this.form[this.configData['field.id']] = null |
| | | }) |
| | | return |
| | | } |
| | | // 编辑 |
| | | this.$nextTick(() => { |
| | | for (const key in this.form) { |
| | | this.form[key] = target[key] |
| | | } |
| | | if (this.form.labels) { |
| | | this.form.labelsArr = this.form.labels.split(',') |
| | | } |
| | | if (this.form.provinceId && this.form.cityId) { |
| | | this.form.area = [this.form.provinceId, this.form.cityId] |
| | | } else if (this.form.provinceId && !this.form.cityId) { |
| | | this.form.area = [this.form.provinceId] |
| | | } |
| | | }) |
| | | }, |
| | | async getLabel () { |
| | | this.cateList = await list() |
| | | }, |
| | | async getCityTreeList () { |
| | | this.areas = await findTreeList({}) |
| | | }, |
| | | async getCityTree () { |
| | | this.area = await findTreeList({}) |
| | | this.setSecondLevelChildrenToNullPrecise(this.area) |
| | | this.area.forEach(item => { |
| | | if (item.childAreasList.length === 0) { |
| | | item.childAreasList = null |
| | | } |
| | | }) |
| | | }, |
| | | setSecondLevelChildrenToNullPrecise (data, level = 1) { |
| | | if (!data || !data.length) return |
| | | |
| | | data.forEach(item => { |
| | | if (item.childAreasList && item.childAreasList.length) { |
| | | if (level === 1) { |
| | | // 这是第一级节点,处理其子节点(第二级) |
| | | item.childAreasList.forEach(child => { |
| | | child.childAreasList = null |
| | | }) |
| | | } else { |
| | | // 继续递归处理更深层级 |
| | | this.setSecondLevelChildrenToNullPrecise(item.childAreasList, level + 1) |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | </script> |