jiangping
2025-04-16 34de82b3794a413b438b66e0aa8bcdbe8133f7d5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<template>
  <GlobalWindow
    :title="title"
    :visible.sync="visible"
    :confirm-working="isWorking"
    @confirm="confirm"
  >
    <el-form :model="form" ref="form" :rules="rules">
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入名称" v-trim/>
      </el-form-item>
      <el-form-item label="选择父级" prop="parentId">
        <treeselect
            v-model="form.parentId"
            placeholder="请选择"
            :options="categorys"
            :normalizer="normalizeOptions"
            :default-expand-level="1"
            noChildrenText="没有子选项"
            noOptionsText="没有可选项"
            noResultsText="没有匹配的结果"
            @select="node => treeHandleSelect(node)"
        />
<!--        <el-cascader  v-model="form.categoryList" :options="categorys" @change="handleChangeCategory" :show-all-levels="false"
                      clearable filterable :props="categoryprops"  >
          <template slot-scope="{ node, data }">
            <span>{{ data.name }}</span> &lt;!&ndash; 自定义显示内容 &ndash;&gt;
          </template>
        </el-cascader>-->
      </el-form-item>
      <el-form-item label="排序码" prop="sortnum">
        <el-input v-model="form.sortnum"  type="number" placeholder="请输入排序码(升序)" v-trim/>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" v-trim/>
      </el-form-item>
    </el-form>
  </GlobalWindow>
</template>
 
<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
export default {
  name: 'OperaCategoryWindow',
  extends: BaseOpera,
  components: { GlobalWindow },
  data () {
    return {
      // 表单数据
      form: {
        id: null,
        name: '',
        type: '',
        remark: '',
        categoryList: [],
        sortnum: null,
        parentId: null
      },
      categoryprops: {
        label: 'name',
        value: 'id',
        checkStrictly: true,
        lazyLoad: this.lazyLoad
      },
      categorys: [],
      // 验证规则
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.config({
      api: '/business/category',
      'field.id': 'id'
    })
  },
  methods: {
    normalizeOptions (node) {
      if (node.childList && !node.childList.length) {
        // 去掉children=[]的children属性
        delete node.childList
      }
      return {
        id: node.id,
        label: node.name,
        children: node.childList
      }
    },
    treeHandleSelect (node) {
      if (this.form.id != null && node.id && this.form.id === node.id) {
        this.$tip.error('对不起,父级不能设置为自身!')
        this.form.parentId = null
      }
    },
    handleChangeCategory (value) {
      this.form.parentId = null
      if (this.form.categoryList && this.form.categoryList.length >= 1) {
        this.form.parentId = this.form.categoryList[this.form.categoryList.length - 1]
      }
      if (!this.form.categoryList || this.form.categoryList.length == 0 || this.form.categoryList.length == 1) {
        this.form.type = 4
      } else {
        this.form.type = 6
      }
    },
    getTreeData (data) {
      if (!data) {
        return data
      }
      for (let i = 0; i < data.length; i++) {
        console.log(data)
        if (data[i].childList) {
          if (data[i].childList.length < 1) {
            data[i].childList = [] // children若为空数组,则将children设为undefined
            data[i].childern = [] // children若为空数组,则将children设为undefined
          } else {
            this.getTreeData(data[i].childList) // children若不为空数组,则继续 递归调用 本方法
          }
        }
      }
      return data
    },
    open (title, target, categorys, categoryType, parentId) {
      this.title = title
      this.categorys = JSON.parse(JSON.stringify(categorys||[]));
      console.log(parentId)
      this.visible = true
      this.form = {
        id: null,
        name: '',
        type: '',
        categoryList: [],
        sortnum: null,
        remark: '',
        parentId: parentId
      }
      this.form.type = categoryType
      // 新建
      var that = this
      if (target == null) {
        this.$nextTick(() => {
          this.$refs.form.resetFields()
          this.form.parentId = parentId
          this.form[this.configData['field.id']] = null
          // this.form.categoryList = []
          /*if (parentIdPath && parentIdPath != null) {
            var array = parentIdPath.split('/')
            array.forEach(item => {
              if (item && item != null && item !== '') {
                that.form.categoryList.push(parseInt(item))
              }
            })
            that.handleChangeCategory()
          }*/
        })
        return
      }
      // 编辑
      this.$nextTick(() => {
        for (const key in this.form) {
          this.form[key] = target[key]
        }
        /*this.form.categoryList = []
        if (target.parentId && target.idParentPath) {
          var array = target.idParentPath.split('/')
          array.forEach(item => {
            if (item && item != null && item !== '') {
              that.form.categoryList.push(parseInt(item))
            }
          })
        }*/
      })
    }
  }
}
</script>