|
@@ -4,156 +4,172 @@
|
|
|
<el-main>
|
|
|
|
|
|
<div style="margin-bottom: 10px">
|
|
|
- <el-button size="medium" icon="el-icon-back" type="text">返回</el-button>
|
|
|
+ <el-button size="medium" icon="el-icon-back" type="text" @click="back">返回</el-button>
|
|
|
<span style="margin-left: 20px; font-size: 18px">运营商列表</span>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
- <el-button size="medium" icon="el-icon-search" style="margin-bottom: 15px" @click="search(searchFormData)">查询</el-button>
|
|
|
- <el-button size="medium" icon="el-icon-plus" @click="showAdd" style="margin-left: 0">新增</el-button>
|
|
|
+ <el-button size="medium" icon="el-icon-search" style="margin-bottom: 15px" @click="search(searchFormData)">
|
|
|
+ 查询
|
|
|
+ </el-button>
|
|
|
+ <el-button size="medium" icon="el-icon-plus" @click="showAdd" style="margin-left: 0">新增</el-button>
|
|
|
|
|
|
|
|
|
<div style="padding: 10px;background-color: white">
|
|
|
- <el-form :inline="true" :model="searchFormData" style="background-color: white;">
|
|
|
- <el-form-item label="运营商名称">
|
|
|
- <el-input placeholder="运营商名称" size="mini" v-model="searchFormData.name"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="运营商编号">
|
|
|
- <el-input placeholder="运营商编号" size="mini" v-model="searchFormData.number"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="联系人">
|
|
|
- <el-input placeholder="联系人" size="mini" v-model="searchFormData.contact"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="联系电话">
|
|
|
- <el-input placeholder="联系电话" size="mini" v-model="searchFormData.tel"></el-input>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="省份" size="mini" style="margin-top: 6px">
|
|
|
- <el-select v-model="searchFormData.province" placeholder="省份" style="width: 180px">
|
|
|
- <el-option label="上海" value="上海"></el-option>
|
|
|
- <el-option label="广东" value="广东"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="城市" style="margin-top: 6px" size="mini">
|
|
|
- <el-select v-model="searchFormData.city" placeholder="城市" style="width: 180px">
|
|
|
- <el-option label="广州" value="广州"></el-option>
|
|
|
- <el-option label="韶关" value="韶关"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="具体地址">
|
|
|
- <el-input placeholder="具体地址" size="mini" v-model="searchFormData.address"></el-input>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
-
|
|
|
- <el-dialog title="运营商" :visible.sync="dialogFormVisible" style="width: 70% ; margin-left: 300px ;">
|
|
|
-
|
|
|
- <el-form label-position="left" :model="formData">
|
|
|
- <el-form-item label="运营商名称" style=" text-align: right;margin-right: 20px">
|
|
|
- <el-input v-model="formData.name"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="运营商编号" style="">
|
|
|
- <el-input v-model="formData.number"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="联系人" style=" text-align: right;margin-right: 34px;margin-left: 38px">
|
|
|
- <el-input v-model="formData.contact"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="联系电话" style="">
|
|
|
- <el-input v-model="formData.tel"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="省份" style=" text-align: right;margin-right: 62px;margin-left: 52px ;">
|
|
|
- <el-select v-model="formData.province" placeholder="省份" style="width: 202px">
|
|
|
- <el-option label="上海" value="上海"></el-option>
|
|
|
- <el-option label="广东" value="广东"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="城市" style="">
|
|
|
- <el-select v-model="formData.city" placeholder="城市" style="width: 202px">
|
|
|
- <el-option label="广州" value="广州"></el-option>
|
|
|
- <el-option label="韶关" value="韶关"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="具体地址" style=" text-align: right;margin-right: 75px;margin-left: 24px">
|
|
|
- <el-input v-model="formData.address"></el-input>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- </el-form>
|
|
|
-
|
|
|
- <div slot="footer" class="dialog-footer" style="text-align: center">
|
|
|
- <el-button @click="cancel()">取 消</el-button>
|
|
|
- <el-button type="primary" @click="addOrEditMehtond()">确 定</el-button>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
-
|
|
|
- </el-form>
|
|
|
-
|
|
|
-
|
|
|
- <el-table :data="tableData">
|
|
|
- <el-table-column type="selection"></el-table-column>
|
|
|
-
|
|
|
- <el-table-column prop="name" label="运营商名称"></el-table-column>
|
|
|
- <el-table-column prop="number" label="运营商编号"></el-table-column>
|
|
|
- <el-table-column prop="contact" label="联系人"></el-table-column>
|
|
|
- <el-table-column prop="tel" label="联系电话"></el-table-column>
|
|
|
-
|
|
|
- <el-table-column prop="province" label="省份"></el-table-column>
|
|
|
- <el-table-column prop="city" label="城市"></el-table-column>
|
|
|
- <el-table-column prop="address" label="具体地址"></el-table-column>
|
|
|
- <el-table-column label="账号状态">
|
|
|
- <template slot-scope="scope">
|
|
|
- {{ String(scope.row.status) === '0' ? '已禁用' : '正常' }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
-
|
|
|
- <el-table-column label="操作" fixed="right">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button type="text" size="medium" @click="showEdit(scope.row)">编辑</el-button>
|
|
|
- <el-button type="text" size="medium" @click="operatorList(scope.row)">项目</el-button>
|
|
|
- <el-button type="text" size="medium" @click="del(scope.row)" style="color: #c01920">删除</el-button>
|
|
|
-
|
|
|
- <el-button
|
|
|
- type="text"
|
|
|
- size="medium"
|
|
|
- class="delBut non"
|
|
|
- style="color: #c01920"
|
|
|
- @click="statusHandle(scope.row)"
|
|
|
- >
|
|
|
- {{ scope.row.status == '1' ? '禁用' : '启用' }}
|
|
|
- </el-button>
|
|
|
-
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
-
|
|
|
-
|
|
|
- <el-pagination
|
|
|
- style="margin-top: 15px;text-align: center"
|
|
|
- background
|
|
|
- layout="prev, pager, next"
|
|
|
- :page-size="pager.pageSize"
|
|
|
- :current-page="pager.pageIndex"
|
|
|
- :total="pager.itemCount"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- >
|
|
|
- </el-pagination>
|
|
|
+ <el-form :inline="true" :model="searchFormData" style="background-color: white;">
|
|
|
+ <el-form-item label="运营商名称">
|
|
|
+ <el-input placeholder="运营商名称" size="mini" v-model="searchFormData.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="运营商编号">
|
|
|
+ <el-input placeholder="运营商编号" size="mini" v-model="searchFormData.number"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="联系人">
|
|
|
+ <el-input placeholder="联系人" size="mini" v-model="searchFormData.contact"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="联系电话">
|
|
|
+ <el-input placeholder="联系电话" size="mini" v-model="searchFormData.tel"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+
|
|
|
+ <el-form-item label="省份" size="mini" style="margin-top: 6px">
|
|
|
+ <el-select v-model="searchFormData.province" placeholder="省份" style="width: 180px" clearable>
|
|
|
+ <el-option v-for="item in areas" :value="item.label" :label="item.label" :key="item.code"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="城市" style="margin-top: 6px" size="mini">
|
|
|
+ <el-select v-model="searchFormData.city" placeholder="城市" style="width: 180px"
|
|
|
+ :disabled="!searchFormData.province" clearable>
|
|
|
+ <el-option v-for="item in cityArr" :value="item.label" :label="item.label" :key="item.code"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+
|
|
|
+ <el-form-item label="具体地址">
|
|
|
+ <el-input placeholder="具体地址" size="mini" v-model="searchFormData.address"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+
|
|
|
+ <el-dialog title="运营商" :visible.sync="dialogFormVisible" style="width: 70% ; margin-left: 300px ;">
|
|
|
+
|
|
|
+ <el-form label-position="left" :model="formData">
|
|
|
+ <el-form-item label="运营商名称" style=" text-align: right;margin-right: 20px">
|
|
|
+ <el-input v-model="formData.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="运营商编号" style="">
|
|
|
+ <el-input v-model="formData.number"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="联系人" style=" text-align: right;margin-right: 34px;margin-left: 38px">
|
|
|
+ <el-input v-model="formData.contact"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="联系电话" style="">
|
|
|
+ <el-input v-model="formData.tel"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+
|
|
|
+ <el-form-item label="省份" style=" text-align: right;margin-right: 62px;margin-left: 52px ;">
|
|
|
+ <el-select v-model="formData.province" placeholder="省份" style="width: 202px" clearable>
|
|
|
+ <el-option v-for="item in areas" :value="item.label" :label="item.label"
|
|
|
+ :key="item.code"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="城市">
|
|
|
+ <el-select v-model="formData.city" placeholder="城市" style="width: 202px"
|
|
|
+ :disabled="!formData.province" clearable>
|
|
|
+ <el-option v-for="item in cityArr" :value="item.label" :label="item.label"
|
|
|
+ :key="item.code"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+
|
|
|
+ <el-form-item label="具体地址" style=" text-align: right;margin-right: 75px;margin-left: 24px">
|
|
|
+ <el-input v-model="formData.address"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <div slot="footer" class="dialog-footer" style="text-align: center">
|
|
|
+ <el-button @click="cancel()">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="addOrEditMehtond()">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+
|
|
|
+ <el-table :data="tableData">
|
|
|
+ <el-table-column type="selection"></el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="name" label="运营商名称"></el-table-column>
|
|
|
+ <el-table-column prop="number" label="运营商编号"></el-table-column>
|
|
|
+ <el-table-column prop="contact" label="联系人"></el-table-column>
|
|
|
+ <el-table-column prop="tel" label="联系电话"></el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="province" label="省份"></el-table-column>
|
|
|
+ <el-table-column prop="city" label="城市"></el-table-column>
|
|
|
+ <el-table-column prop="address" label="具体地址"></el-table-column>
|
|
|
+ <el-table-column label="账号状态">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ String(scope.row.status) === '0' ? '已禁用' : '正常' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+
|
|
|
+ <el-table-column label="操作" fixed="right">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" size="medium" @click="showEdit(scope.row)">编辑</el-button>
|
|
|
+ <el-button type="text" size="medium" @click="operatorList(scope.row)">项目</el-button>
|
|
|
+ <el-button type="text" size="medium" @click="del(scope.row)" style="color: #c01920">删除</el-button>
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="medium"
|
|
|
+ class="delBut non"
|
|
|
+ style="color: #c01920"
|
|
|
+ @click="statusHandle(scope.row)"
|
|
|
+ >
|
|
|
+ {{ scope.row.status == '1' ? '禁用' : '启用' }}
|
|
|
+ </el-button>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+
|
|
|
+ <el-pagination
|
|
|
+ style="margin-top: 15px;text-align: center"
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :page-size="pager.pageSize"
|
|
|
+ :current-page="pager.pageIndex"
|
|
|
+ :total="pager.itemCount"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
</div>
|
|
|
</el-main>
|
|
|
|
|
|
</el-container>
|
|
|
</div>
|
|
|
+
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
-
|
|
|
+import areas from '../../util/area.json'
|
|
|
|
|
|
export default {
|
|
|
name: 'operator',
|
|
|
data() {
|
|
|
return {
|
|
|
|
|
|
+ //存放对应的城市数组
|
|
|
+ cityArr: [],
|
|
|
+ //省份
|
|
|
+ areas: areas,
|
|
|
+
|
|
|
api: {
|
|
|
list: this.$api.operator.list,
|
|
|
delete: this.$api.operator.delete,
|
|
@@ -210,11 +226,44 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
|
|
|
+
|
|
|
created: function () {
|
|
|
this.loadData();
|
|
|
+
|
|
|
},
|
|
|
|
|
|
+ watch: {
|
|
|
+ 'searchFormData.province'(oldValue, newValue) {
|
|
|
+
|
|
|
+ console.log(oldValue)
|
|
|
+ console.log(newValue)
|
|
|
+
|
|
|
+ this.searchFormData.city = ''
|
|
|
+
|
|
|
+ this.cityArr = areas.find(item => item.label == oldValue).children
|
|
|
+ console.log(this.cityArr)
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ 'formData.province'(oldValue, newValue) {
|
|
|
+ console.log(oldValue)
|
|
|
+ console.log(newValue)
|
|
|
+
|
|
|
+ if (oldValue) {
|
|
|
+ this.cityArr = areas.find(item => item.label == oldValue).children
|
|
|
+ console.log(this.cityArr)
|
|
|
+ this.formData.city = ''
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ deep: true // 深度监听
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
methods: {
|
|
|
+
|
|
|
//切换页码
|
|
|
handleCurrentChange(index) {
|
|
|
this.loadData(index)
|
|
@@ -263,9 +312,6 @@ export default {
|
|
|
},
|
|
|
|
|
|
showEdit(row) {
|
|
|
-
|
|
|
- console.log(row)
|
|
|
-
|
|
|
this.dialogFormVisible = true;
|
|
|
|
|
|
this.editRow = JSON.parse(JSON.stringify(row));
|
|
@@ -430,9 +476,14 @@ export default {
|
|
|
|
|
|
let vm = this;
|
|
|
vm.$router.push({
|
|
|
- path:'/operatorList',
|
|
|
- query:{row:row}
|
|
|
+ path: '/operatorList',
|
|
|
+ query: {row: row}
|
|
|
})
|
|
|
+ },
|
|
|
+
|
|
|
+ back() {
|
|
|
+ let vm = this;
|
|
|
+ vm.$router.back()
|
|
|
}
|
|
|
|
|
|
}
|
|
@@ -440,18 +491,16 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.el-form-item{
|
|
|
+.el-form-item {
|
|
|
margin-right: 10px;
|
|
|
margin-left: 10px;
|
|
|
margin-bottom: 10px;
|
|
|
margin-top: 0px;
|
|
|
}
|
|
|
|
|
|
-.el-dialog__header{
|
|
|
+.el-dialog__header {
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
|
|
|
-
|
|
|
-
|
|
|
</style>
|