<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/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="https://unpkg.com/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>