分类特殊属性接口联调，新增，删除，详情已调通

src/api/special/basic.js

@@ -0,0 +1,33 @@
+import request from '@/utils/request'
+
+// 新增分类特殊属性
+export function add(data) {
+  return request({
+    url: `/system/special/add`,
+    method: 'post',
+    data: data
+  })
+}
+// 通过分类编码查询特殊属性信息
+export function getDetail(code) {
+  return request({
+    url: `/system/special/detail/${code}`,
+    method: 'get',
+  })
+}
+// 删除分类特殊属性
+export function delSpecial(data) {
+  return request({
+    url: `/system/special/delete`,
+    method: 'post',
+    data: data
+  })
+}
+// 删除分类特殊属性
+export function editSpecial(data) {
+  return request({
+    url: `/system/special/edit`,
+    method: 'post',
+    data: data
+  })
+}

src/views/material/specialAttr/index.vue

@@ -56,7 +56,7 @@
             class="filter-tree"
             :data="data"
             :props="defaultProps"
-            default-expand-all
+            @node-click="clickTree"
             :filter-node-method="filterNode"
             ref="tree">
           </el-tree>
@@ -65,8 +65,8 @@
         <el-col :span="18">
 
           <el-row>
-            <el-button type="primary" size="small" plain>新增</el-button>
-            <el-button type="primary" size="small" plain>删除</el-button>
+            <el-button type="primary" size="small" plain @click="addSpc">新增</el-button>
+            <el-button type="primary" size="small" plain @click="deleteSpc">删除</el-button>
           </el-row>
 
           <el-row>
@@ -76,13 +76,21 @@
               @selection-change="handleSelectionChange"
             >
               <el-table-column type="selection" width="55" />
-              <el-table-column type="index" label="序号" width="55" align="center" />
-              <el-table-column label="属性名称" align="center" prop="name" />
-              <el-table-column label="属性编码" align="center" prop="code" />
-              <el-table-column label="字段类型" align="center" prop="type" />
-              <el-table-column label="字段ID值" align="center" prop="id" />
-              <el-table-column label="排序" align="center" prop="id" />
-              <el-table-column label="字段说明" align="center" prop="remark" />
+              <el-table-column label="排序" align="center" prop="sort" />
+              <el-table-column label="属性名称" align="center" prop="attributeName" />
+              <el-table-column label="属性编码" align="center" prop="classCode" />
+              <el-table-column label="字段类型" align="center" prop="fieldType" />
+              <el-table-column label="字段ID值" align="center" prop="dictId" />
+              <el-table-column label="字段说明" align="center" prop="fieldDesc" />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                align="center"
+                width="100">
+                <template slot-scope="scope">
+                  <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
+                </template>
+              </el-table-column>
             </el-table>
           </el-row>
 
@@ -90,12 +98,87 @@
       </el-row>
     </el-card>
 
+    <!-- 新增弹窗 -->
+    <el-dialog :title="titles" :visible.sync="dialogFormVisible" center>
+      <el-form :model="form" :rules="rules" ref="bindForm">
+        <el-row>
+          <el-col :span="16">
+            <el-form-item label="属性名称" prop="attributeName" label-width="120px">
+              <el-input v-model="form.attributeName"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="16">
+            <el-form-item label="属性编码" prop="attributeCode" label-width="120px">
+              <el-input v-model="form.attributeCode"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="16">
+            <el-form-item label="字段类型" prop="fieldType" label-width="120px">
+                  <el-select
+                    v-model="form.fieldType"
+                    placeholder="字段类型"
+                    clearable
+                    style="width: 285px"
+                  >
+                    <el-option
+                      v-for="dict in dict.type.template_field_type"
+                      :key="dict.value"
+                      :label="dict.label"
+                      :value="dict.value"
+                    />
+                  </el-select>
+                </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="16">
+            <el-form-item label="字典ID值" prop="dictId" label-width="120px">
+              <el-autocomplete
+                class="inline-input"
+                v-model="form.dictId"
+                :fetch-suggestions="querySearch"
+                placeholder="请输入内容"
+                prefix-icon="el-icon-search"
+                style="width: 285px"
+              ></el-autocomplete>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="16">
+            <el-form-item label="排序" prop="sort" label-width="120px">
+              <el-input v-model="form.sort"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="16">
+            <el-form-item label="字段说明" prop="fieldDesc" label-width="120px">
+              <el-input v-model="form.fieldDesc"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submit('bindForm')">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
+import { getTree } from '@/api/classify/basic';
+import { add, getDetail, delSpecial, editSpecial } from '@/api/special/basic';
 export default {
   name: 'specialAttr',
+  dicts: ['template_field_type'],
   watch: {
     filterText(val) {
       this.$refs.tree.filter(val);
@@ -109,54 +192,174 @@ export default {
       rule:[{label: '包含', value: 1}, {label: '不包含', value: 2}, {label: '等于', value: 3}, {label: '不等于', value: 4}],
       input: '',
       filterText: '',
-      data: [{
-          id: 1,
-          label: '一级 1',
-          children: [{
-            id: 4,
-            label: '二级 1-1',
-            children: [{
-              id: 9,
-              label: '三级 1-1-1'
-            }, {
-              id: 10,
-              label: '三级 1-1-2'
-            }]
-          }]
-        }, {
-          id: 2,
-          label: '一级 2',
-          children: [{
-            id: 5,
-            label: '二级 2-1'
-          }, {
-            id: 6,
-            label: '二级 2-2'
-          }]
-        }, {
-          id: 3,
-          label: '一级 3',
-          children: [{
-            id: 7,
-            label: '二级 3-1'
-          }, {
-            id: 8,
-            label: '二级 3-2'
-          }]
-      }],
+      data: [],
       defaultProps: {
-          children: 'children',
-          label: 'label'
+          children: 'childrens',
+          label: 'materialType'
+      },
+      taskList:[],
+      // 判断是否为最末级节点
+      isLast: false,
+      // 弹框默认隐藏
+      dialogFormVisible: false,
+      titles: '新增',
+      // 表单
+      form: {
+        attributeName: '',
+        attributeCode: '',
+        fieldType: '',
+        dictId: '',
+        sort: '',
+        fieldDesc: ''
+      },
+      rules: {
+        // attributeName:[{ required: true, message: '请输入属性名称', trigger: 'blur' }],
+        // attributeCode:[{ required: true, message: '请输入属性编码', trigger: 'blur' }],
+        // fieldType:[{ required: true, message: '请选择字段类型', trigger: 'change' }],
+        // sort:[{ required: true, message: '请输入属性编码', trigger: 'blur' }],
+      },
+      // 搜索框内容
+      restaurants: [],
+      // 获取节点的code
+      treeData: {
+        classCode: ''
       },
-      taskList:[]
+      // 表格内选中条目
+      arr: []
     }
   },
+  created() {
+    this.getTreeData()
+  },
   methods: {
+    // 获取树形结构
+    getTreeData(data) {
+      getTree(data).then(res => {
+        let {code, rows} = res
+        if(code === 200) {
+          this.data = rows
+        }
+      })
+    },
+    // 获取详情方法
+    getDetailData(code) {
+      getDetail(code).then(res => {
+        if(res.code === 200) {
+          this.taskList = res.data
+        }
+      })
+    },
+    // 点击树形节点,调用详情接口
+    clickTree(data) {
+      console.log('树形节点信息：',data)
+      // 判断是否为最末级节点
+      if (data.childrens.length == 0) {
+        this.isLast = true
+      } else {
+        this.isLast = false
+      }
+      this.treeData.classCode = data.code
+      this.getDetailData(data.code)
+    },
+    // 新增最末级物料分类的特殊属性
+    addSpc() {
+      // 如果不是最末级节点则给出提示
+      if(this.isLast) {
+        this.dialogFormVisible = true
+        this.titles = '新增'
+        this.$nextTick(() => {
+          this.form = {
+            attributeName: '',
+            attributeCode: '',
+            fieldType: '',
+            dictId: '',
+            sort: '',
+            fieldDesc: ''
+          }
+        })
+      } else {
+        this.$message({
+          message: '请先选中最末级节点',
+          type: 'warning'
+        });
+      }
+    },
+    // 表单填写提交
+    submit(formName) {
+      console.log('表单', formName)
+      this.$refs[formName].validate((valid) => {
+        if(valid) {
+          if(this.titles == '新增') { //判断是走新增接口还是修改接口
+            let params = {...this.form, ...this.treeData}
+            console.log('params', params)
+            add(params).then(res => {
+              if(res.code === 200) {
+                // 关闭弹窗，调用查询接口,清空输入内容
+                this.getDetailData(this.treeData.classCode)
+                this.dialogFormVisible = false
+                this.$refs['bindForm'].resetFields();
+              }
+            })
+          } else {
+            
+          }
+        }
+      })
+    },
+    // 点击取消
+    cancel() {
+      this.dialogFormVisible = false
+      this.$refs['bindForm'].resetFields();
+    },
+    // 搜索框
+    querySearch(queryString, cb) {
+        var restaurants = this.restaurants;
+        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
+        // 调用 callback 返回建议列表的数据
+        cb(results);
+      },
+    createFilter(queryString) {
+      return (restaurant) => {
+        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+      };
+    },
     filterNode(value, data) {
         if (!value) return true;
         return data.label.indexOf(value) !== -1;
     },
-    handleSelectionChange() { }
+    // 获取选中条目
+    handleSelectionChange(val) { 
+      console.log('选中z', val)
+      this.arr = val.map(item => {return item.id})
+      console.log('数组id',this.arr)
+    },
+    // 点击删除按钮
+    deleteSpc() {
+      if(this.arr.length == 0) {
+        this.$message({
+          message: '请选择删除数据',
+          type: 'warning'
+        });
+      } else {
+        delSpecial(this.arr).then(res => {
+          if (res.code === 200) {
+            this.$message({
+              message: res.msg,
+              type: 'success'
+            });
+            this.getDetailData(this.treeData.classCode)
+          }
+        })
+      }
+    },
+    // 点击修改按钮
+    edit(e) {
+      console.log('修改e',e)
+      this.dialogFormVisible = true
+      this.titles = '修改'
+      // 修改时候弹框数据回显
+      this.form = e
+    }
   },
 }
 </script>