1

lzhe

2024-06-05 42d6439f20892ddd204e2b6e2b3bf168fc516d5c

1

 src/views/console/basic-data/addSupplierInfo.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,114 @@
<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
        <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="120px" label-position="center">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="供应商编号">
                        <el-input placeholder="保存时系统自动生成" disabled clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="供应商名称" prop="name">
                        <el-input v-model="form.name" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="供应商地址">
                        <el-input v-model="form.address" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="联系方式" prop="tel">
                        <el-input v-model="form.tel" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="visible=false" >取 æ¶ˆ</el-button>
            <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit">保 å­˜</el-button>
        </template>
    </el-dialog>
</template>

<script>
    export default {
        emits: ['success', 'closed'],
        data() {
            var checkTel = (rule, value, callback) => {
                var reg = /^1[0-9]{10}$/g;
                if(value != "") {
                    if (!reg.test(value)) {
                        return callback(new Error('请输入11位手机号码'));
                    }
                }
                callback();
            };
            return {
                mode: "add",
                titleMap: {
                    add: '新建供应商',
                    edit: '编辑供应商',
                    show: '查看'
                },
                visible: false,
                isSaveing: false,
                //表单数据
                form: {
                    name: "",
                    address: "",
                    tel: ""
                },
                //验证规则
                rules: {
                    name:[{required: true, message: '请输入供应商名称'}],
                    tel: [{required: true,validator: checkTel, trigger: 'blur'}]
                },
            }
        },
        mounted() {
			
        },
        methods: {
            //显示
            open(mode='add'){
                this.mode = mode;
                this.visible = true;
                return this
            },
            //表单提交方法
            submit(){
                var obj = Object.assign({},this.form);
                if(this.mode == 'edit') {
                    obj.isEdit = true;
                }
                this.$refs.dialogForm.validate(async (valid) => {
                    if (valid) {
                        this.isSaveing = true;
                        this.$HTTP.post("/api/blade-cps/supplier/save",obj).then(res=> {
                            this.isSaveing = false;
                            if(res.code == 200) {
                                this.$emit('success', this.form, this.mode);
                                this.visible = false;
                                this.$message.success("操作成功");
                            }else {
                                this.$alert(res.message, "提示", {type: 'error'});
                            }
                        })
                    }else{
                        return false;
                    }
                })
            },
             //表单注入数据
            setData(data){
                //可以和上面一样单个注入，也可以像下面一样直接合并进去
                console.log(data,222)
                Object.assign(this.form, data)
            }
        }
    }
</script>

<style>
</style>

 src/views/console/basic-data/gallery.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,215 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-06-05 17:06:58
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="main">
        <div class="noData" v-if="latticeList.length == 0">
            <div style="margin-bottom: 12px;">暂无数据</div>
            <el-button type="primary" @click="table_create">新建</el-button>
        </div>
        <div v-if="latticeList.length != 0">
            <!-- ä¸€ä¸ªæ ¼å­ -->
            <el-button type="primary" @click="create_list" style="margin-bottom: 12px;">新建</el-button>
            <div v-for="(item,index) in latticeList">
                <!-- æ–°å¢žçš„值 -->
                <div  v-if="item.status != 1">
                    <el-input v-model="item.name" clearable style="width: 200px;" placeholder="请输入内容"></el-input>
                    <span class="add-sure" @click="addLattice(index)">确定</span>
                    <span class="cencel" @click="cencelLattice(index)">取消</span>
                </div>
                <!-- åæ˜¾çš„值 -->
                <div v-if="item.status == 1">
                    <span class="title">{{item.name}}</span>
                    <span class="edit" @click="editData(index)"><el-icon><EditPen /></el-icon>编辑</span>
                    <span class="delData" @click="delData(index)">删除</span>
                </div>
                <div class="upload">
                    <div v-for="(item1,index1) in item.ImageUrlList">
                        <img :src="item1.url" alt="" @click="viewUrl(item1)">
                    </div>
                    <el-upload
                        :disabled="!item.id"
                        :action="action"
                        list-type="picture-card"
                        :on-success="(file)=>handleAvatarSuccess(file,index)"
                        :before-upload="(file)=>beforeAvatarUpload(file,index)">
                        <el-icon><Plus /></el-icon>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import * as ElementPlusIconsVue from '@element-plus/icons-vue'
    let icons = []
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        icons.push(key)
    }
    export default {
        name: "supplier",
        data(){
            return {
                dialogImageUrl: "",
                action: "",
                dialogVisible: false,
                latticeList: [],
                ImageUrlList: [],
            }
        },
        created(){
			
        },
        mounted(){
            this.getTreeList();
        },
        components: {
            ...ElementPlusIconsVue
        },
        methods: {
            viewUrl(item1) {
                this.dialogVisible = true;
                this.dialogImageUrl = item1.url;
            },
            editData(index) {
                this.latticeList[index].status = 0;
            },
            delData(index) {
                this.$confirm('删除','提示', {
                    type: 'warning',
                }).then(() => {
                    this.$HTTP.delete(`/api/blade-system/gallery/remove`,[this.latticeList[index].id]).then(res=> {
                        if(res.code == 200) {
                            this.getTreeList();
                            this.$message.success("操作成功");
                        }else {
                            this.$alert(res.message, "提示", {type: 'error'});
                        }
                    })
                }).catch(() => {
                    //取消
                })
            },
            addLattice(index) {
                var obj = {};
                if(this.latticeList[index].id) {
                    Object.assign(obj,this.latticeList[index]);
                    obj.status = 1;
                    var method = "put";
                    var url = "/api/blade-system/gallery/update";
                }else {
                    obj.name = this.latticeList[index].name;
                    var method = "post";
                    var url = "/api/blade-system/gallery/insert";
                }
                if (this.latticeList.some(item => item.name == "")) {  
                    this.$message.error("图库名称不能为空！");  
                    return;  
                }else {
                    this.$HTTP[method](url,obj).then(res=> {
                        if(res.code == 200) {
                            this.getTreeList();
                        }
                    })
                }
            },
            getTreeList() {
                this.$HTTP.get("/api/blade-system/gallery/tree?itemCount=999").then(res=> {
                    if(res.code == 200) {
                        this.latticeList = res.data;
                    }
                })
            },
            cencelLattice(index) {
                if(this.latticeList[index].id) {
                    this.latticeList[index].status = 1;
                }else {
                    this.latticeList.splice(index,1);
                }
            },
            beforeAvatarUpload(file,index) {
                if(this.latticeList[index].id) {
                    this.action = `/api/blade-system/gallery-item/insert?galleryId=${this.latticeList[index].id}`;
                }else {
                    return false;
                }
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
				
            },
            handleAvatarSuccess(file,index) {
                this.latticeList[index].ImageUrlList.push({
                    url: file.url
                })
            },
            table_create() {
                this.latticeList.push({name: "",ImageUrlList: [],status: 0})
            },
            create_list() {
                this.latticeList.unshift({name: "",ImageUrlList: [],status: 0})
            }
        }
    }
</script>

<style scoped>
    .main {
        border: 1px solid #dcdfe6;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
        margin: 8px;
        padding: 8px;
        background-color: #fff;
        min-height: 100%;
    }
    .noData {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 300px;
        font-size: 16px;
        color: #5e6d82;
    }
    .add-sure {
        color: #409eff;
        margin: 0 10px;
        cursor: pointer;
    }
    .cencel {
        cursor: pointer;
        color: #fa554c;
    }
    .delData {
        cursor: pointer;
        color: #fa554c;
        font-size: 14px;
        font-weight: 700;
    }
    .edit {
        color: #409eff;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        margin-right: 12px;
    }
    .title {
        font-size: 16px;
        font-weight: 700;
        margin-right: 20px;
    }
    .upload {
        margin-top: 12px;
        margin-bottom: 12px;
    }
</style>

 src/views/console/basic-data/supplier-info.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,209 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-06-05 15:15:52
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="user-main">
        <div class="user-top">
            <div class="right-bottom"> 
                <el-button type="primary" @click="addSupplier">新建</el-button>
                <el-button type="danger" plain @click="delSupplier" :disabled="selection.length == 0">删除</el-button>
            </div>
            <div>
                <el-input v-model="searchData.keyword" placeholder="输入检索内容" style="width: 180px;margin-right: 8px;" clearable>
                    <template #suffix><el-button type="primary" text @click="searchclick">搜索</el-button></template>
                </el-input>
            </div>
        </div>
        <div class="user-table">
            <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" class="multipleTableRef" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="code" label="供应商编号"></el-table-column>
                <el-table-column prop="name" label="供应商名称"></el-table-column>
                <el-table-column prop="address" label="供应商地址"></el-table-column>
                <el-table-column prop="tel" label="联系方式"></el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                        <el-button text type="primary" size="small" @click="table_del(scope.row, scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                style="margin-top: 12px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[15, 50, 100]"
                :page-size="15"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>

    <save-dialog v-if="dialog.save" ref="saveDialog" @success="addUserSuccess" @closed="dialog.save=false"></save-dialog>
</template>
<script>
    import saveDialog from './addSupplierInfo'
    export default {
        name: "supplier",
        data(){
            return {
                selection: [],
                searchData: {
                    keyword: "",
                    current: "1",
                    size: "15"
                },
                total: 0,
                isSaveing: false,
                dialog: {
                    save: false
                },
                leftActive: true,
                tableData: []
            }
        },
        created(){
			
        },
        mounted(){
            this.searchSupplier();
        },
        components: {
            saveDialog
        },
        methods: {
            addUserSuccess() {
                this.searchclick();
            },
            table_del(row) {
                this.$confirm('确定将选择数据删除?','提示', {
                    type: 'warning',
                }).then(() => {
                    this.$HTTP.delete(`/api/blade-cps/supplier/remove?supplierIds=${row.id}`).then(res=> {
                        if(res.code == 200) {
                            this.searchclick();
                            this.$message.success("操作成功");
                        }else {
                            this.$alert(res.message, "提示", {type: 'error'});
                        }
                    })
                }).catch(() => {
                    //取消
                })
            },
            searchclick() {
                this.searchData.current = "1";
                this.searchData.size = "15";
                this.searchSupplier();
            },
            searchSupplier() {
                this.$HTTP.get("/api/blade-cps/supplier/page",this.searchData).then(res=> {
                    if(res.code == 200) {
                        res.data.records.forEach(item=> {
                            if(item.status == "1") {
                                item.status = true;
                            }else {
                                item.status = false;
                            }
                        })
                        this.tableData = res.data.records;
                        this.total = res.data.total;
                    }
                })
            },
            //添加
            addSupplier(){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open()
                })
            },
            table_edit(row){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('edit').setData(row)
                })
            },
            //查看
            table_show(row){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('show').setData(row)
                })
            },
            handleSelectionChange(selection) {
                this.selection = selection;
            },
            delSupplier() {
                if(this.selection.length == 0) {
                    this.$message({
                      message: '请选择至少一条数据',
                      type: 'warning'
                    });
                    return;
                }
                var selStr = "";
                this.selection.map(item=> {
                    selStr += item.id + ","
                })
                selStr = selStr.replace(/,$/, '');
                var that = this;
                this.$confirm('确定将选择数据删除？','提示', {
                    type: 'warning',
                }).then(() => {
                    that.$HTTP.delete("/api/blade-cps/supplier/remove?supplierIds="+selStr).then(res=> {
                        if(res.code == 200) {
                            that.$message.success("操作成功");
                            that.searchSupplier();
                        }
                    })
                }).catch(() => {
                    //取消
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} æ¡`);
                this.searchData.current = "1";
                this.searchData.size = val;
                this.searchSupplier();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.searchData.current = val;
                this.searchSupplier();
            }
        }
    }
</script>

<style scoped>
    .user-main {
        background-color: #f9fafb;
        border: 1px solid #dcdfe6;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
        margin: 8px;
        padding: 8px;
        background-color: #fff;
    }
    .user-top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
    }
    .user-table {
        width: 100%;
        margin-bottom: 8px;
		
    }
    .multipleTableRef {
        margin-bottom: 8px;
    }
</style>