oa-system/src/components/ConferenceModule/Supplierinfo.vue

<template>
    <div class="supplierinfo-all">
        <el-dialog  :close-on-click-modal="false" width="960px" class="supplierinfo-dialog" title="新增编辑" :visible.sync="supplierinfoVisible">
            <el-form :model="form" :rules="formrules" ref="form">
                <el-form-item label="供应商类型" prop="typeId" :label-width="formLabelWidth">
                    <el-select v-model="form.typeId" placeholder="请选择供应商类型">
                        <el-option v-for="item in mediaSupplierInitarr" :key="item.id" :label="item.text" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="地区" prop="privince" :label-width="formLabelWidth">
                    <el-input v-model="form.privince" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="城市" prop="city" :label-width="formLabelWidth">
                    <el-input v-model="form.city" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="单位名称" prop="unitName" :label-width="formLabelWidth">
                    <el-input v-model="form.unitName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="单位联系人" prop="contact" :label-width="formLabelWidth">
                    <el-input v-model="form.contact" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                    <!-- <el-input v-model="form.sex" autocomplete="off"></el-input> -->
                </el-form-item>
                <el-form-item label="联系电话" prop="tel" :label-width="formLabelWidth">
                    <el-input v-model="form.tel" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电子邮件" :label-width="formLabelWidth">
                    <el-input v-model="form.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="单位缩写" :label-width="formLabelWidth">
                    <el-input v-model="form.unitAbbreviation" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="职位" :label-width="formLabelWidth">
                    <el-input v-model="form.post" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="传真号码" :label-width="formLabelWidth">
                    <el-input v-model="form.fax" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="微信" :label-width="formLabelWidth">
                    <el-input v-model="form.weChat" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item style="width:100%;" label="单位地址" :label-width="formLabelWidth">
                    <el-input type="textarea" :rows="2" v-model="form.unitAddress" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item style="width:100%;" label="备注" :label-width="formLabelWidth">
                    <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="supplierinfoVisible = false">取 消</el-button>
                <el-button @click="resetForm('form')">清空</el-button>
                <el-button type="primary" @click="submitForm('form')">确 定</el-button>
            </div>
        </el-dialog>
        <div class="supplierinfo-screen">
            <div class="supplierinfo-screen-ul">
                <div class="supplierinfo-screen-li">
                    <div class="supplierinfoscreen-li-title">供应商类型:&nbsp;</div>
                    <el-select @change="valuechange" multiple collapse-tags size="small" v-model="value" filterable placeholder="请选择">
                        <el-option
                          v-for="item in mediaSupplierInitarr"
                          :key="item.id"
                          :label="item.text"
                          :value="item.id">
                        </el-option>
                      </el-select>
                </div>
                <div class="supplierinfo-screen-li">
                    <div class="supplierinfoscreen-li-title">供应商名称:&nbsp;</div>
                    <el-input clearable size="small" v-model="search" placeholder="请输入内容"></el-input>
                </div>
                <!-- <div class="supplierinfo-screen-li">
                    <div class="supplierinfoscreen-li-title">供应商单位:&nbsp;</div>
                    <el-input size="small" v-model="value" placeholder="请输入内容"></el-input>
                </div>
                <div class="supplierinfo-screen-li">
                    <div class="supplierinfoscreen-li-title">供应商电话:&nbsp;</div>
                    <el-input size="small" v-model="value" placeholder="请输入内容"></el-input>
                </div> -->
                <el-button size="small" @click="MediaSupplierPageItemsearch" type="primary">查询</el-button>
            </div>
            <el-button size="small" @click="addsupplierinfo" type="primary">新增数据</el-button>
        </div>
        <div class="supplierinfo-table">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="privince" label="地区" width="180">
                </el-table-column>
                <el-table-column prop="city" label="城市" width="180">
                </el-table-column>
                <el-table-column prop="unitName" label="单位名称">
                </el-table-column>
                <el-table-column prop="contact" label="联系人名称">
                </el-table-column>
                <el-table-column prop="tel" label="联系电话" width="180">
                </el-table-column>
                <el-table-column prop="createUserName" label="录入人" width="110">
                </el-table-column>
                <el-table-column prop="createTime" label="录入时间" width="180">
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button size="small" @click="MediaSupplierInfo(scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="delbtn(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10, 12, 14, 15, 20]" :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>                 
export default {
    data () {
        return {
            userId:'',
            token:'',
            options: [{
            value: '选项1',
            label: '黄金糕'
            }, {
            value: '选项2',
            label: '双皮奶'
            }, {
            value: '选项3',
            label: '蚵仔煎'
            }, {
            value: '选项4',
            label: '龙须面'
            }, {
            value: '选项5',
            label: '北京烤鸭'
            }],
            value: '',
            values: '',
            tableData: [],
            currentPage: 1,
            pagesize:12,
            total:0,
            search:'',
            supplierinfoVisible:false,
            form:{
                id:'',
                typeId:'',
                privince:'',
                city:'',
                unitName:'',
                unitAbbreviation:'',
                unitAddress:'',
                contact:'',
                sex:'',
                post:'',
                tel:'',
                email:'',
                weChat:'',
                fax:'',
                remark:'',
            },
            formLabelWidth:'100px',
            formrules: {
                typeId: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                privince: [
                    { required: true, message: '请输入', trigger: 'blur' }
                ],
                city: [
                    { required: true, message: '请输入', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '请选择', trigger: 'blur' }
                ],
                tel: [
                    { required: true, message: '请输入', trigger: 'blur' }
                ],
                unitName: [
                    { required: true, message: '请输入', trigger: 'blur' }
                ],
                contact: [
                    { required: true, message: '请输入', trigger: 'blur' }
                ],
            },
            mediaSupplierInitarr:[],
        }
    },
    methods:{
        handleSizeChange(val) {
            this.pagesize=val;
            this.currentPage=1;
            this.MediaSupplierPageItem();
        },
        handleCurrentChange(val) {
            this.currentPage=val;
            this.MediaSupplierPageItem();
        },
        MediaSupplierPageItemsearch(){
            this.currentPage=1;
            this.MediaSupplierPageItem();
        },
        //获取基础数据
        MediaSupplierInit() {
            var url = "/api/Resource/MediaSupplierInit"
            var that = this
            this.$axios({
                method: 'get',
                url: url,
                headers: {
                    Authorization: 'Bearer'
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.mediaSupplierInitarr=res.data.data;
                }else{
                    that.$message({
                        message:res.data.msg,
                        duration:1000,
                        type:"error"
                    });
                }
            }).catch(function (error) {
                that.$message.error('报错请联系信息部！');
            });
        },
        //获取列表
        MediaSupplierPageItem() {
            var url = "/api/Resource/MediaSupplierPageItem"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer'
                },
                data: {
                    portType:1,
                    pageIndex: that.currentPage,
                    pageSize:that.pagesize,
                    search:that.search,
                    typeLabel:that.values
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.tableData=res.data.data;
                    that.total=res.data.count;
                }else{
                    that.$message({
                        message:res.data.msg,
                        duration:1000,
                        type:"error"
                    });
                }
            }).catch(function (error) {
                that.$message.error('报错请联系信息部！');
            });
        },
        //数据初始化
        infoinitialize(){
            this.form={
                id:'',
                currUserId:'',
                typeId:'',
                privince:'',
                city:'',
                unitName:'',
                unitAbbreviation:'',
                unitAddress:'',
                contact:'',
                sex:'',
                post:'',
                tel:'',
                email:'',
                weChat:'',
                fax:'',
                remark:'',
            }
        },
        //新增
        addsupplierinfo(){
            this.infoinitialize();
            this.supplierinfoVisible=true;
        },
        //
        delbtn(val){
            this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.MediaSupplierSoftDel(val);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '操作已取消！'
                });
            });
        },
        //删除
        MediaSupplierSoftDel(val) {
            var url = "/api/Resource/MediaSupplierSoftDel"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer'
                },
                data: {
                    portType:1,
                    currUserId: that.userId,
                    id:val.id,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message:res.data.msg,
                        type:"success"
                    });
                    that.MediaSupplierPageItem();
                }else{
                    that.$message({
                        message:res.data.msg,
                        duration:1000,
                        type:"error"
                    });
                }
            }).catch(function (error) {
                that.$message.error('报错请联系信息部！');
            });
        },
        //供应商查询
        valuechange(val){
            this.values=''
            for (let i = 0; i < val.length; i++) {
                this.values+=val[i]+','
            }
            this.values=this.values.substring(0,this.values.length-1);
        },
        //获取详情
        MediaSupplierInfo(val) {
            this.infoinitialize();
            this.supplierinfoVisible=true;
            var url = "/api/Resource/MediaSupplierInfo"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer'
                },
                data: {
                    portType:1,
                    id: val.id,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    var formuinfo=res.data.data
                    that.form={
                        id:formuinfo.id,
                        typeId:formuinfo.typeId,
                        privince:formuinfo.privince,
                        city:formuinfo.city,
                        unitName:formuinfo.unitName,
                        unitAbbreviation:formuinfo.unitAbbreviation,
                        unitAddress:formuinfo.unitAddress,
                        contact:formuinfo.contact,
                        sex:formuinfo.sex==0?'男':'女',
                        post:formuinfo.post,
                        tel:formuinfo.tel,
                        email:formuinfo.email,
                        weChat:formuinfo.weChat,
                        fax:formuinfo.fax,
                        remark:formuinfo.remark,
                    }
                }else{
                    that.$message({
                        message:res.data.msg,
                        duration:1000,
                        type:"error"
                    });
                }
            }).catch(function (error) {
                that.$message.error('报错请联系信息部！');
            });
        },
        testfun(){
            var kvArray = [["key1", "value1"], ["key2", "value2"]];
            // Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象
            var myMap = new Map(kvArray);
            console.log(myMap)
            // 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
            var outArray = Array.from(myMap);
            console.log(outArray)
            var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]);
            var second = new Map([[1, 'uno'], [2, 'dos']]);
            
            // 合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的，对应值即 uno，dos， three
            var merged = new Map([...first, ...second]);
            console.log(merged);

            let mySet = new Set();
            // mySet.add(1); // Set(1) {1}
            // mySet.add(5); // Set(2) {1, 5}
            // mySet.add(5); // Set(2) {1, 5} 这里体现了值的唯一性
            // mySet.add("some text"); 
            // Set(3) {1, 5, "some text"} 这里体现了类型的多样性
            var o = {a: 1, b: 2}; 
            mySet.add(o);
            // mySet.add({a: 1, b: 2}); 
            console.log(mySet);
        },
        //新增接口
        MediaSupplierOp() {
            var url = "/api/Resource/MediaSupplierOp"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer'
                },
                data: {
                    portType:1,
                    id: that.form.id==""?0:that.form.id,
                    currUserId: that.userId,
                    typeId: that.form.typeId,
                    privince: that.form.privince,
                    city: that.form.city,
                    unitName: that.form.unitName,
                    unitAbbreviation: that.form.unitAbbreviation,
                    unitAddress: that.form.unitAddress,
                    contact: that.form.contact,
                    sex: that.form.sex=='男'?0:1,
                    post: that.form.post,
                    tel: that.form.tel,
                    email: that.form.email,
                    weChat: that.form.weChat,
                    fax: that.form.fax,
                    remark: that.form.remark,
                    
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message:res.data.msg,
                        type:"success"
                    });
                    that.supplierinfoVisible=false;
                    that.MediaSupplierPageItem();
                }else{
                    that.$message({
                        message:res.data.msg,
                        duration:1000,
                        type:"error"
                    });
                }
            }).catch(function (error) {
                that.$message.error('报错请联系信息部！');
            });
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.MediaSupplierOp();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    created(){
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.MediaSupplierInit();
    },
    mounted(){
        this.testfun();
        this.MediaSupplierPageItem();
    }
}
</script>
<style>
.supplierinfo-all {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    min-height: 830px;
    
}
.supplierinfo-screen{
    display: flex;
    justify-content: space-between;
}
.supplierinfo-screen-ul{
    display: flex;
}
.supplierinfo-screen-li{
    width: 280px;
    display: flex;
    align-items: center;
}
.supplierinfoscreen-li-title{
    width: 80px;
    text-align: end;
    font-size: 14px;
    color: #555;
}
.supplierinfo-screen-li .el-input{
    width: 195px;
}
.supplierinfo-screen-li .el-select{
    width: 195px;
}
.supplierinfo-table{
    margin-top: 15px;
}
.supplierinfo-table .block{
    margin-top: 20px;
    text-align: center;
}
.supplierinfo-all .el-dialog__title{
    font-size: 17px;
    font-weight: 600;
}
.supplierinfo-dialog .el-form-item{
    width: 300px;
}
.supplierinfo-dialog .el-form{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
</style>