11201716

src/components/ConferenceModule/Supplierinfo.vue

@@ -1,8 +1,65 @@
 <template>
     <div class="supplierinfo-all">
+        <el-dialog 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="supplierinfo-screen-li">
                     <div class="supplierinfoscreen-li-title">供应商类型:&nbsp;</div>
                     <el-select size="small" v-model="value" filterable placeholder="请选择">
                         <el-option
@@ -12,54 +69,52 @@
                           :value="item.value">
                         </el-option>
                       </el-select>
-                </div>
+                </div> -->
                 <div class="supplierinfo-screen-li">
                     <div class="supplierinfoscreen-li-title">供应商名称:&nbsp;</div>
-                    <el-input size="small" v-model="value" placeholder="请输入内容"></el-input>
+                    <el-input clearable size="small" v-model="search" placeholder="请输入内容"></el-input>
                 </div>
-                <div class="supplierinfo-screen-li">
+                <!-- <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" type="primary">查询</el-button>
+                </div> -->
+                <el-button size="small" @click="MediaSupplierPageItemsearch" type="primary">查询</el-button>
             </div>
-            <el-button size="small" type="primary">新增数据</el-button>
+            <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="date"
-                label="日期"
-                width="180">
+            <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="name"
-                label="姓名"
-                width="180">
+                <el-table-column prop="tel" label="联系电话" width="180">
                 </el-table-column>
-                <el-table-column
-                prop="address"
-                label="地址">
+                <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="currentPage4"
-                  :page-sizes="[100, 200, 300, 400]"
-                  :page-size="100"
-                  layout="total, sizes, prev, pager, next, jumper"
-                  :total="400">
+                <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>
     </div>
 </template>
@@ -67,6 +122,8 @@
 export default {
     data () {
         return {
+            userId:'',
+            token:'',
             options: [{
             value: '选项1',
             label: '黄金糕'
@@ -84,32 +141,245 @@ export default {
             label: '北京烤鸭'
             }],
             value: '',
-            tableData: [{
-            date: '2016-05-02',
-            name: '王小虎',
-            address: '上海市普陀区金沙江路 1518 弄'
-            }, {
-            date: '2016-05-04',
-            name: '王小虎',
-            address: '上海市普陀区金沙江路 1517 弄'
-            }, {
-            date: '2016-05-01',
-            name: '王小虎',
-            address: '上海市普陀区金沙江路 1519 弄'
-            }, {
-            date: '2016-05-03',
-            name: '王小虎',
-            address: '上海市普陀区金沙江路 1516 弄'
-            }],
-            currentPage4: 4
+            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) {
-            console.log(`每页 ${val} 条`);
+            this.pagesize=val;
+            this.currentPage=1;
+            this.MediaSupplierPageItem();
         },
         handleCurrentChange(val) {
-            console.log(`当前页: ${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,
+                }
+            }).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('报错请联系信息部！');
+            });
+        },
+        //获取详情
+        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"]];
@@ -136,10 +406,78 @@ export default {
             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.testfun();
+        this.MediaSupplierPageItem();
     }
 }
 </script>
@@ -149,7 +487,6 @@ export default {
     padding: 10px;
     box-shadow: 0 0 5px #0005;
     border-radius: 10px;
-    height: 100%;
     min-height: 840px;
     
 }
@@ -184,4 +521,16 @@ export default {
     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>