jiangping
2025-05-27 3d6a8e384d31432a23f5a8c1a3135a58cbe617b5
company/src/components/business/OperaKnowledgeWindow.vue
@@ -15,22 +15,42 @@
                    <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"
@@ -48,118 +68,140 @@
</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>