loumengning
/
hbp


			
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="/assets/theme-chalk/index.css">
</head>
<body>
<div id="app" class="table">
    <div>
        <div class="header-search">
            <span>名称：</span>
            <el-input v-model="search.item_name" style="width: 120px;" placeholder="请输入内容"></el-input>
            <span>类型：</span>
            <el-select v-model="search.item_type" placeholder="请选择" style="width: 120px;" clearable>
                <el-option
                        v-for="item in type_list"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <span>省份</span>
            <el-select v-model="search.province" placeholder="请选择" style="width: 120px;" clearable>
                <el-option
                        v-for="item in province"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value">
                </el-option>
            </el-select>
            <span>市</span>
            <el-select v-model="search.city" placeholder="请选择" style="width: 120px;" clearable>
                <el-option
                        v-for="item in city"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value">
                </el-option>
            </el-select>
            <span>区</span>
            <el-select v-model="search.area" placeholder="请选择" style="width: 120px;" clearable>
                <el-option
                        v-for="item in area"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-search" @click="getData(1)">搜索</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="edit(null)">新增</el-button>
        </div>

        <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark"
                  style="font-size:12px;width: 100%;margin-top: 12px">
            <el-table-column prop="id" label="ID" min-width="50"></el-table-column>
            <el-table-column prop="item_type" label="类型" min-width="70" :formatter="getTypeName" ></el-table-column>
            <el-table-column prop="item_name" label="名称" min-width="180"></el-table-column>
            <el-table-column prop="item_unit" label="计价单位"  min-width="70" :formatter="getUnitName"  ></el-table-column>
            <el-table-column prop="purchase_user_id" label="采购负责人" :formatter="getUserName"  min-width="80"></el-table-column>
            <el-table-column prop="province_name" label="省"  min-width="80"></el-table-column>
            <el-table-column prop="city_name" label="市"  min-width="80"></el-table-column>
            <el-table-column prop="area_name" label="区"  min-width="80"></el-table-column>
            <el-table-column prop="detail_address" label="详细地址"  min-width="250"></el-table-column>
            <el-table-column prop="create_time" label="创建时间" min-width="80"></el-table-column>
            <el-table-column prop="update_time" label="更新时间" min-width="80"></el-table-column>
            <el-table-column label="操作" min-width="180">
                <template slot-scope="scope">
                    <el-button-group>
                        <el-button type="primary" size="mini" @click="edit(scope.row)" icon="el-icon-edit">编辑</el-button>
                        <el-button type="danger" size="mini" icon="el-icon-delete" @click="delAll(scope.row.id)">删除</el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :page-size="search.pageSize"
                :pager-count="11"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :current-page="search.pageNum"
                :page-sizes="[10, 20, 30, 40, 50]"
                @size-change="sizeChange"
                @current-change="getData"
                @prev-click="getData"
                @next-click="getData"
        ></el-pagination>
    </div>


    <transition name="bounce" v-if="editShow">
        <el-dialog title="详情" :visible.sync="editShow" width="90%" top="15px">
            <el-form ref="form" label-width="100px" style="width: 100%;padding-bottom: 20px">
                <div style="display: flex;width: 100%">
                    <el-form-item v-if="editType" label="ID：" style="width: 80%">
                        <div v-html="editData.id"></div>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item  label="名称：" style="width: 80%">
                        <el-input v-model="editData.item_name" style="width: 280px;" placeholder="请输入内容"></el-input>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item  label="类型：" >
                        <el-select v-model="editData.item_type" placeholder="请选择" style="width: 120px;" clearable>
                            <el-option  v-for="item in type_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item  label="计价单位：" >
                        <el-select v-model="editData.item_unit" placeholder="请选择" style="width: 120px;" clearable>
                            <el-option  v-for="item in unit_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item  label="省：" >
                        <el-select v-model="editData.province" placeholder="请选择" style="width: 120px;" clearable>
                            <el-option  v-for="item in province" :key="item.value" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item  label="市：" >
                        <el-select v-model="editData.city" placeholder="请选择" style="width: 120px;" clearable>
                            <el-option  v-for="item in edit_city" :key="item.value" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item  label="区：" >
                        <el-select v-model="editData.area" placeholder="请选择" style="width: 120px;" clearable>
                            <el-option  v-for="item in edit_area" :key="item.value" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item  label="详细地址：" style="width: 80%">
                        <el-input v-model="editData.detail_address" style="width: 580px;" placeholder="请输入内容"></el-input>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item  label="采购负责人：" >
                        <el-select v-model="editData.purchase_user_id" placeholder="请选择" style="width: 120px;" clearable>
                            <el-option  v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item  label="说明：" >
                        <el-input style="width: 580px;" type="textarea" :rows="2" placeholder="请输入内容" v-model="editData.item_memo"></el-input>
                    </el-form-item>
                </div>
                <div>
                    <el-button type="primary"  @click="editDoing()" >保存</el-button>
                </div>
            </el-form>
        </el-dialog>
    </transition>
</div>
</body>
<!-- import Vue before Element -->
<script src="/assets/js/vue/vue.js"></script>
<!-- import JavaScript -->
<script src="/assets/js/vue/index.js"></script>
<script src="/assets/js/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                search: {
                    item_name: "",
                    item_type: "",
                    province:"",
                    city:"",
                    area: "",
                    pageSize:10,
                    pageNum: 1
                },
                total: 0,
                tableData: [],
                editShow: false,
                editType: false,
                editData: {
                },
                province: [],
                city: [],
                area:[],
                edit_city_set:3,
                edit_city: [],
                edit_area:[],
                unit_list:[],
                type_list:[],
                userList: []

            }
        },
        created() {
            this.getAdminUser();
            this.getProvince();
            this.getConfig();
            this.getData(1)
        },
        watch: {
            "search.province" : function (newVal,oldVal){
                this.city = []
                this.area = []
                this.search.city=""
                this.search.area=""
                if (newVal==''){
                    return false;
                }
                let row = {
                    "province":newVal
                }
                axios.post("/hotel.php/ajax/areaList", row).then((response) => {
                    let data = response.data;
                    if (data.flag) {
                        this.city = data.data;

                    } else {
                        this.$message.error(data.msg);
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            "search.city" : function (newVal,oldVal){
                this.area = []
                this.search.area=""
                if (newVal == "") {
                    return  false;
                }
                let row = {
                    province:this.search.province,
                    city:newVal
                }
                axios.post("/hotel.php/ajax/areaList", row).then((response) => {
                    let data = response.data;
                    if (data.flag) {
                        this.area = data.data;
                    } else {
                        this.$message.error(data.msg);
                    }
                }).catch(function (error) {
                    console.log(error);
                });

            },
            "editData.province" : function (newVal,oldVal){
                if (this.edit_city_set==3) {
                    this.edit_city = []
                    this.edit_area = []
                    this.editData.city=""
                    this.editData.area=""
                }
                if (newVal==''){
                    return false;
                }
                let row = {
                    "province":newVal
                }
                axios.post("/hotel.php/ajax/areaList", row).then((response) => {
                    let data = response.data;
                    if (data.flag) {
                        this.edit_city = data.data;
                        this.edit_city_set++;
                    } else {
                        this.$message.error(data.msg);
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            "editData.city" : function (newVal,oldVal){
                if (this.edit_city_set==3) {
                    this.edit_area = []
                    this.editData.area=""
                }
                if (newVal == "") {
                    return  false;
                }
                let row = {
                    province:this.editData.province,
                    city:newVal
                }
                axios.post("/hotel.php/ajax/areaList", row).then((response) => {
                    let data = response.data;
                    if (data.flag) {
                        this.edit_area = data.data;
                        this.edit_city_set++;
                    } else {
                        this.$message.error(data.msg);
                    }
                }).catch(function (error) {
                    console.log(error);
                });

            }
        },
        methods: {
            getUserName(info) {
                for (let i = 0; i < this.userList.length; i++) {
                    if (this.userList[i].id == info.purchase_user_id) {
                        return this.userList[i].name
                    }
                }
                return "-"
            },
            getTypeName(info) {
                for (let i = 0; i < this.type_list.length; i++) {
                    if (this.type_list[i].id == info.item_type) {
                        return this.type_list[i].name
                    }
                }
                return "-"
            },
            getUnitName(info) {
                for (let i = 0; i < this.unit_list.length; i++) {
                    if (this.unit_list[i].id == info.item_unit) {
                        return this.unit_list[i].name
                    }
                }
                return "-"
            },
            getAdminUser() {
                axios.post("/hotel.php/auth/admin/getList", this.search).then((response) => {
                    this.userList = response.data.list;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            getConfig(){
                axios.post("/hotel.php/general/config/getList?key=site.item_unit", {}).then((response) => {
                    let data = response.data;
                    this.unit_list = data.list;
                }).catch(function (error) {
                    console.log(error);
                });
                axios.post("/hotel.php/general/config/getList?key=site.item_category", {}).then((response) => {
                    let data = response.data;
                    this.type_list = data.list;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            getProvince(){
                axios.post("/hotel.php/ajax/areaList", {}).then((response) => {
                    let data = response.data;
                    if (data.flag) {
                        this.province = data.data;
                    } else {
                        this.$message.error(data.msg);
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            sizeChange(pageSize) {
                this.search.pageSize = pageSize;
                this.getData(this.search.pageNum)
            },
            //獲取列表
            getData(page) {
                this.search.pageNum = page;
                axios.post("/hotel.php/cf_item/list", this.search).then((response) => {
                    let data = response.data;
                    if (data.flag) {
                        this.tableData = data.data.list;
                        this.total = data.data.total;
                    } else {
                        this.$message.error(response.msg);
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            edit(info) {
                if (info == null) {
                    this.editType = false;
                    this.editData = {
                        item_type:"",
                        item_unit: "",
                        item_name: "",
                        province:"",
                        city:"",
                        area: "",
                        detail_address:"",
                        purchase_user_id:"",
                        item_memo:""
                    }
                } else {
                    this.edit_city_set = 1;
                    this.editType = true;
                    this.editData = {
                        id:info.id,
                        item_type:info.item_type,
                        item_unit: info.item_unit,
                        item_name: info.item_name,
                        province:info.province,
                        province_name:info.province_name,
                        city:info.city,
                        city_name:info.city_name,
                        area: info.area,
                        area_name:info.area_name,
                        detail_address:info.detail_address,
                        purchase_user_id:info.purchase_user_id,
                        item_memo:info.item_memo
                    }
                }
                this.editShow = true;
            },
            setAreaName(){
                for (let i = 0; i < this.province.length; i++) {
                    if (this.province[i].value == this.editData.province) {
                        this.editData.province_name = this.province[i].name;
                        break
                    }
                }
                for (let i = 0; i < this.edit_city.length; i++) {
                    if (this.edit_city[i].value == this.editData.city) {
                        this.editData.city_name = this.edit_city[i].name;
                        break
                    }
                }
                for (let i = 0; i < this.edit_area.length; i++) {
                    if (this.edit_area[i].value == this.editData.area) {
                        this.editData.area_name = this.edit_area[i].name;
                        break;
                    }
                }
            },
            editDoing(){
                if (this.editData.item_name==''){
                    this.$message.error("名称不能为空");return false;
                }
                if (this.editData.item_type==''){
                    this.$message.error("请选择类型");return false;
                }
                if (this.editData.item_unit==''){
                    this.$message.error("请选择计价单位");return false;
                }
                if (this.editData.province==''){
                    this.$message.error("省不能为空");return false;
                }
                if (this.editData.city==''){
                    this.$message.error("市不能为空");return false;
                }
                if (this.editData.area==''){
                    this.$message.error("区不能为空");return false;
                }
                this.setAreaName();
                axios.post("/hotel.php/cf_item/save", this.editData).then( (response)=> {
                    let data = response.data;
                    console.log(this.tableData);
                    if (data.flag) {
                        this.$message.success("保存成功");
                        this.editShow = false;
                        this.getData(1);
                    } else {
                        this.$message.error(data.msg);
                    }
                }).catch(function (error) {
                    this.$message.error("保存失败");
                    console.log(error);
                });
            },
            delAll(id){
                this.$confirm('确定删除记录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let param = {
                        id: id
                    }
                    axios.post("/hotel.php/cf_item/delAll", param).then((response) => {
                        let data = response.data;
                        if (data.flag) {
                            this.getData(this.search.pageNum)
                            this.$message.success("保存成功");
                        } else {
                            this.$message.error(response.msg);
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                }).catch(() => {
                    this.$message.info("已取消");
                    this.getData(this.search.pageNum)
                })
            }

        }
    })
</script>
<style lang="scss" scoped>
    .el-table thead {
        background-color: #5a5e66 !important;
    }

    .header-search {
        font-size: 14px;
        font-weight: 900;
    }

    body {
        background-color: white;
    }

    .table {
        width: 100%;
        font-size: 12px;
        margin-top: 12px;
        background-color: white;
    }
    .el-form-item{
        margin-bottom: 5px !important;
    }
</style>
</html>