供应商管理增加分类管理

fhKeeper/formulahousekeeper/timesheet/src/views/provider/provider.vue

@@ -14,8 +14,9 @@
                     </div>
                 </el-form-item>
                 <el-form-item style="float:right;">
-                    <el-link type="primary" :underline="false" @click="handleAdd(-1,null)">新增供应商</el-link>
-                    <el-link type="primary" :underline="false" @click="intocustomerRatio">批量导入供应商</el-link>
+                    <el-link type="primary" :underline="false" @click="handleAdd(-1,null)" style="margin-right: 10px">新增供应商</el-link>
+                    <el-link type="primary" :underline="false" @click="intocustomerRatio" style="margin-right: 10px">批量导入供应商</el-link>
+                    <el-link type="primary" :underline="false" @click="showClfDialog = true">分类管理</el-link>
                 </el-form-item>
             </el-form>
         </el-col>
@@ -28,18 +29,13 @@
                     </template> -->
             </el-table-column>
             <el-table-column prop="providerCode" label="供应商编码"  width="200"></el-table-column>
-            <el-table-column prop="providerName" label="供应商名称" width="200">
-            </el-table-column>
-            <el-table-column prop="contactName" label="联系人"  width="120">
-            </el-table-column>
-            <el-table-column prop="contactPhone" label="联系电话"  width="150">
-            </el-table-column>
-            <el-table-column prop="email" label="邮箱"  width="180">
-            </el-table-column>
-            <el-table-column prop="address" label="地址" width="200">
-            </el-table-column>
-            <el-table-column prop="remark" label="备注" width="300">
-            </el-table-column>
+            <el-table-column prop="providerName" label="供应商名称" width="200"></el-table-column>
+            <el-table-column prop="providerCategoryName" label="供应商分类" width="200"></el-table-column>
+            <el-table-column prop="contactName" label="联系人"  width="120"></el-table-column>
+            <el-table-column prop="contactPhone" label="联系电话"  width="150"></el-table-column>
+            <el-table-column prop="email" label="邮箱"  width="180"></el-table-column>
+            <el-table-column prop="address" label="地址" width="200"></el-table-column>
+            <el-table-column prop="remark" label="备注" width="300"></el-table-column>
             
             <el-table-column label="操作" width="150" fixed="right">
                 <template slot-scope="scope">
@@ -72,6 +68,11 @@
                 <el-form-item label="供应商名称" prop="providerName">
                     <el-input v-model="addForm.providerName" :max="20" placeholder="请输入供应商名称" clearable></el-input>
                 </el-form-item>
+                <el-form-item label="供应商分类" prop="providerCategoryId">
+                    <el-select v-model="addForm.providerCategoryId" filterable placeholder="请选择供应商分类" clearable @change="supplierChange">
+                        <el-option v-for="item in baseClfList" :key="item.id" :label="item.providerCategoryName" :value="item.id"></el-option>
+                    </el-select>
+                </el-form-item>
                 <el-form-item label="联系人" prop="contactName">
                     <el-input v-model="addForm.contactName" :max="20" placeholder="请输入供应商联系人" clearable></el-input>
                 </el-form-item>
@@ -115,6 +116,41 @@
             </el-upload>
             </p>
         </el-dialog>
+
+        <!-- 分类管理 -->
+        <el-dialog title="供应商分类条目管理" show-header="false" v-if="showClfDialog" :visible.sync="showClfDialog" :close-on-click-modal="false" customClass="customWidth" width="500px">
+            <el-table :data="baseClfList" highlight-current-row  height="400" style="width: 100%;">
+            <el-table-column type="index" width="60" label="序号">
+                <template slot-scope="scope" >
+                        {{scope.$index+1+(page-1)*size}}
+                    </template>
+            </el-table-column>
+            <el-table-column prop="providerCategoryName" label="名称" ></el-table-column>
+            <el-table-column label="操作" width="150">
+                <template slot-scope="scope" >
+                    <el-button size="small" type="primary" @click="addNewClf(scope.row)">编辑</el-button>
+                    <el-button size="small" type="danger" @click="deleteClf(scope.row)">删除</el-button>
+                </template>
+            </el-table-column>
+
+            </el-table>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="showClfDialog = false" >关闭</el-button>
+                <el-button type="primary" @click="addNewClf()" >新增分类项</el-button>
+            </div>
+        </el-dialog>
+        <!-- 新增/编辑 分类条目 -->
+        <el-dialog title="新增/修改分类条目" v-if="addClfDialog" :visible.sync="addClfDialog" :close-on-click-modal="false" customClass="customWidth" width="500px">
+            <el-form ref="form2" :model="addClf" :rules="rules" label-width="100px">
+                <el-form-item label="主项目名称" prop="name">
+                    <el-input v-model="addClf.providerCategoryName" placeholder="请输入主项目名称" clearable></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click.native="addClfDialog = false">取消</el-button>
+                <el-button type="primary" @click="submitClf" :loading="addLoading">提交</el-button>
+            </div>
+        </el-dialog>
     </section>
 </template>
 <style scoped>
@@ -175,7 +211,11 @@
                 importResultMsg:null,
                 showImportResult:false,
                 selectArr: [],
-                delLoading: false
+                delLoading: false,
+                showClfDialog: false,
+                baseClfList: [],
+                addClf: {providerCategoryName: '', companyId: ''},
+                addClfDialog: false
             };
         },
         // 过滤器
@@ -200,6 +240,109 @@
             }
         },
         methods: {
+            // 新增/编辑 分类条目
+            addNewClf(row) {
+                this.addClfDialog = true;
+                if (row == null) {
+                    this.addClf = {}
+                } else {
+                    this.addClf = row;
+                }
+            },
+            // 删除分类条目
+            deleteClf(row) {
+                this.$confirm("该操作可能造成已有数据丢失，确定要删除吗?","删除分类条目", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning"
+                })
+                .then(() => {
+                    this.listLoading = true;
+                    this.http.post('/provider-category/delete',{ 
+                        id: row.id 
+                    },
+                    res => {
+                        this.listLoading = false;
+                        if (res.code == "ok") {
+                            this.$message({
+                                message: "删除成功",
+                                type: "success"
+                            });
+                            this.getClfConfigList();
+                        } else {
+                            this.$message({
+                                message: res.msg,
+                                type: "error"
+                            });
+                        }
+                    },
+                    error => {
+                        this.listLoading = false;
+                        this.$message({
+                            message: error,
+                            type: "error"
+                        });
+                     });
+                })
+                .catch(() => {});
+            },
+            // 获取分类条目
+            getClfConfigList() {
+                this.http.get('/provider-category/list',
+                res => {
+                    if (res.code == "ok") {
+                       this.baseClfList = res.data;
+                       console.log("获取分类条目",res.data);
+                       this.$forceUpdate();
+                    } else {
+                        this.$message({
+                            message: res.msg,
+                            type: "error"
+                        });
+                    }
+                },
+                error => {
+                    this.$message({
+                        message: error,
+                        type: "error"
+                    });
+                });  
+            },
+            supplierChange(e) {
+                console.log(this.addForm.providerCategoryId)
+                if(this.addForm.providerCategoryId) {
+                    for(var i in this.baseClfList) {
+                        if(this.baseClfList[i].id == this.addForm.providerCategoryId) {
+                            this.addForm.providerCategoryName = this.baseClfList[i].providerCategoryName
+                        }
+                    }
+                } else {
+                    this.addForm.providerCategoryName = ''
+                }
+            },
+            // 提交分类
+            submitClf() {
+                console.log(this.addClf)
+                this.http.post('/provider-category/addOrMod',this.addClf,
+                    res => {
+                        if (res.code == "ok") {
+                            this.addClfDialog = false;
+                            // this.baseClfList = res.data;
+                            this.getClfConfigList()
+                        } else {
+                            this.$message({
+                                message: res.msg,
+                                type: "error"
+                            });
+                        }
+                    },
+                    error => {
+                        this.$message({
+                            message: error,
+                            type: "error"
+                        });
+                    });
+            },
             // 批量删除
             selectionChange(selection){
                 console.log('sel',selection);
@@ -566,7 +709,8 @@
             };
         },
         mounted() {
-            this.getList();
+            this.getClfConfigList()
+            this.getList()
         }
     };
 </script>