|
@@ -0,0 +1,491 @@
|
|
|
+<template>
|
|
|
+ <div id="project">
|
|
|
+ <el-container>
|
|
|
+
|
|
|
+ <el-main>
|
|
|
+ <div style="margin-bottom: 10px">
|
|
|
+ <el-button size="medium" icon="el-icon-back" type="text">返回</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>
|
|
|
+
|
|
|
+ <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.customer"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="客户电话">
|
|
|
+ <el-input placeholder="客户电话" size="mini" v-model="searchFormData.customerTel"></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-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-form-item label="运营商编号" style="margin-top: 6px" size="mini">
|
|
|
+ <el-select v-model="formData.operatorNumber" placeholder="运营商编号" style="width: 180px">
|
|
|
+
|
|
|
+ <el-option :value="i.number" v-for="(i,index) in operators" :key="index" :label="i.number"></el-option>
|
|
|
+
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 编辑弹窗-->
|
|
|
+ <el-dialog title="项目" :visible.sync="dialogFormVisible" style="width: 70% ; margin-left: 300px ;">
|
|
|
+ <el-form label-position="left" :model="formData">
|
|
|
+ <el-row style="margin-left: 15px">
|
|
|
+ <el-form-item label="项目名称">
|
|
|
+ <el-input v-model="formData.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="项目编号">
|
|
|
+ <el-input v-model="formData.number"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-row>
|
|
|
+ <el-row style="margin-left: 15px">
|
|
|
+ <el-form-item label="项目描述">
|
|
|
+ <el-input v-model="formData.description"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="客户名称">
|
|
|
+ <el-input v-model="formData.customer"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row style="margin-left: 0px">
|
|
|
+ <el-form-item label="运营商编号">
|
|
|
+ <el-select v-model="formData.operatorNumber" placeholder="运营商编号" style="width: 202px">
|
|
|
+
|
|
|
+ <el-option :value="i.number" v-for="(i,index) in operators" :key="index"
|
|
|
+ :label="i.number"></el-option>
|
|
|
+
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="客户电话">
|
|
|
+ <el-input v-model="formData.customerTel"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-form-item label="省份" style=" text-align: right;margin-right: 40px;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="margin-right: 2px">
|
|
|
+ <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="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="operatorNumber" label="运营商编号"></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="description" label="项目描述"></el-table-column>
|
|
|
+ <el-table-column prop="customer" label="客户名称"></el-table-column>
|
|
|
+ <el-table-column prop="customerTel" 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">
|
|
|
+ <el-button type="text" size="medium" @click="showEdit(scope.row)">编辑</el-button>
|
|
|
+ <el-button type="text" size="medium" @click="gateway">网关</el-button>
|
|
|
+ <el-button type="text" size="medium" @click="del(scope.row)" style="color: #c01920">删除</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>
|
|
|
+
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'project',
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ api: {
|
|
|
+ listOperator: this.$api.operator.list,
|
|
|
+
|
|
|
+ list: this.$api.project.list,
|
|
|
+ delete: this.$api.project.delete,
|
|
|
+ add: this.$api.project.add,
|
|
|
+ update: this.$api.project.update,
|
|
|
+ },
|
|
|
+
|
|
|
+ operators: [],
|
|
|
+
|
|
|
+ addOrEdit: 1,
|
|
|
+
|
|
|
+ dialogFormVisible: false,
|
|
|
+ dialogFormVisible1: false,
|
|
|
+
|
|
|
+ pager: {
|
|
|
+ pageSize: 2,
|
|
|
+ pageIndex: 1,
|
|
|
+ itemCount: 0,
|
|
|
+ },
|
|
|
+
|
|
|
+ operatorData:{
|
|
|
+ name:'',
|
|
|
+ number:'',
|
|
|
+ code:'',
|
|
|
+ status:'',
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ tableData:
|
|
|
+ [{
|
|
|
+ name: '1',
|
|
|
+ number: '1',
|
|
|
+ description: '1',
|
|
|
+ customer: '1',
|
|
|
+ customerTel: '1',
|
|
|
+ province: '1',
|
|
|
+ city: '1',
|
|
|
+ address: '1',
|
|
|
+ operatorName:'',
|
|
|
+ operatorNumber:'',
|
|
|
+ }],
|
|
|
+ formData: {
|
|
|
+ name: '1',
|
|
|
+ number: '1',
|
|
|
+ description: '1',
|
|
|
+ customer: '1',
|
|
|
+ customerTel: '1',
|
|
|
+ province: '1',
|
|
|
+ city: '1',
|
|
|
+ address: '1',
|
|
|
+ operatorNumber: '',
|
|
|
+ code: '',
|
|
|
+ valid: '',
|
|
|
+ },
|
|
|
+ searchFormData:
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ number: '',
|
|
|
+ customer: '',
|
|
|
+ customerTel: '',
|
|
|
+ province: '',
|
|
|
+ city: '',
|
|
|
+ address: '',
|
|
|
+ operatorNumber: '',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ created: function () {
|
|
|
+ this.loadData();
|
|
|
+ this.getOperatorNumber();
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ //切换页码
|
|
|
+ handleCurrentChange(index) {
|
|
|
+ this.loadData(index)
|
|
|
+ },
|
|
|
+
|
|
|
+ getOperatorNumber() {
|
|
|
+ const vm = this;
|
|
|
+ vm.$http.get(vm.api.listOperator, {
|
|
|
+ params: {
|
|
|
+ number: this.searchFormData.operatorNumber,
|
|
|
+ }
|
|
|
+ }).then((resp) => {
|
|
|
+ vm.operators = resp.data.data.operators
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ loadData(index) {
|
|
|
+ var row = this.$route.query.row;
|
|
|
+ console.log(row)
|
|
|
+
|
|
|
+ this.operatorData = row
|
|
|
+
|
|
|
+ console.log(this.operatorData.name)
|
|
|
+
|
|
|
+ const vm = this;
|
|
|
+ vm.$http.get(vm.api.list, {
|
|
|
+ params: {
|
|
|
+ pageSize: 5,
|
|
|
+ pageIndex: index ? index : 1,
|
|
|
+
|
|
|
+ name: this.searchFormData.name,
|
|
|
+ number: this.searchFormData.number,
|
|
|
+ province: this.searchFormData.province,
|
|
|
+ city: this.searchFormData.city,
|
|
|
+ address: this.searchFormData.address,
|
|
|
+ customer: this.searchFormData.customer,
|
|
|
+ customerTel: this.searchFormData.customerTel,
|
|
|
+ operatorName: this.operatorData.name,
|
|
|
+ operatorNumber: this.operatorData.number,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then((response) => {
|
|
|
+ // vm.paper = response.data.data.paper;
|
|
|
+ //console.log(response.data.data);
|
|
|
+
|
|
|
+ vm.pager = response.data.data.pager
|
|
|
+
|
|
|
+ vm.tableData = response.data.data.projects;
|
|
|
+ vm.tableData.operatorNumber = this.operatorData.number;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ ,
|
|
|
+ search() {
|
|
|
+ //console.log(this.searchFormData)
|
|
|
+ this.loadData();
|
|
|
+ }
|
|
|
+ ,
|
|
|
+ showAdd() {
|
|
|
+ this.dialogFormVisible = true;
|
|
|
+
|
|
|
+ this.formData.name = '';
|
|
|
+ this.formData.province = '';
|
|
|
+ this.formData.description = '';
|
|
|
+ this.formData.city = '';
|
|
|
+ this.formData.customer = '';
|
|
|
+ this.formData.customerTel = '';
|
|
|
+ this.formData.address = '';
|
|
|
+ this.formData.number = '';
|
|
|
+ this.formData.operatorNumber = '',
|
|
|
+ this.formData.description = '';
|
|
|
+
|
|
|
+ this.addOrEdit = 1
|
|
|
+
|
|
|
+ this.getOperatorNumber()
|
|
|
+ }
|
|
|
+ ,
|
|
|
+
|
|
|
+ showEdit(row) {
|
|
|
+
|
|
|
+ console.log()
|
|
|
+
|
|
|
+ this.dialogFormVisible = true;
|
|
|
+
|
|
|
+ this.editRow = JSON.parse(JSON.stringify(row));
|
|
|
+ this.formData = this.editRow
|
|
|
+
|
|
|
+ this.addOrEdit = 2
|
|
|
+
|
|
|
+ this.getOperatorNumber()
|
|
|
+ }
|
|
|
+ ,
|
|
|
+
|
|
|
+
|
|
|
+ addOrEditMehtond() {
|
|
|
+ const vm = this;
|
|
|
+ if (this.addOrEdit == 2) {
|
|
|
+ vm.$http.get(vm.api.update, {
|
|
|
+ params: {
|
|
|
+ code: this.formData.code,
|
|
|
+ name: this.formData.name,
|
|
|
+ number: this.formData.number,
|
|
|
+ description: this.formData.description,
|
|
|
+ province: this.formData.province,
|
|
|
+ city: this.formData.city,
|
|
|
+ address: this.formData.address,
|
|
|
+ operatorNumber: this.formData.operatorNumber,
|
|
|
+ customer: this.formData.customer,
|
|
|
+ customerTel: this.formData.customerTel,
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then((response) => {
|
|
|
+ console.log(response)
|
|
|
+
|
|
|
+
|
|
|
+ if (response.data.status == 200) {
|
|
|
+
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ showClose: true,
|
|
|
+ message: response.data.desc
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ this.dialogFormVisible = false;
|
|
|
+
|
|
|
+ this.loadData();
|
|
|
+
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.addOrEdit == 1) {
|
|
|
+ vm.$http.get(vm.api.add, {
|
|
|
+ params: {
|
|
|
+ name: this.formData.name,
|
|
|
+ number: this.formData.number,
|
|
|
+ description: this.formData.description,
|
|
|
+ province: this.formData.province,
|
|
|
+ city: this.formData.city,
|
|
|
+ operatorNumber: this.formData.operatorNumber,
|
|
|
+ address: this.formData.address,
|
|
|
+ customer: this.formData.customer,
|
|
|
+ customerTel: this.formData.customerTel,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then((response) => {
|
|
|
+
|
|
|
+ if (response.data.status == 200) {
|
|
|
+
|
|
|
+ this.dialogFormVisible = false;
|
|
|
+
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ showClose: true,
|
|
|
+ message: response.data.desc
|
|
|
+ })
|
|
|
+
|
|
|
+ this.loadData();
|
|
|
+ }
|
|
|
+ if (response.data.status == 500) {
|
|
|
+
|
|
|
+ this.dialogFormVisible = false;
|
|
|
+
|
|
|
+ this.$message({
|
|
|
+ type: 'error',
|
|
|
+ showClose: true,
|
|
|
+ message: '未找到运营商'
|
|
|
+ })
|
|
|
+
|
|
|
+ this.loadData();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ,
|
|
|
+
|
|
|
+ del(row) {
|
|
|
+ const vm = this;
|
|
|
+ this.$confirm('确认删除', '提示', {
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ vm.$http.get(vm.api.delete, {
|
|
|
+ params: {
|
|
|
+ code: row.code,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then((response) => {
|
|
|
+ console.log(response)
|
|
|
+ if (response.data.status == 200) {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ showClose: true,
|
|
|
+ message: response.data.desc
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ this.loadData();
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ showClose: true,
|
|
|
+ message: '取消删除'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ }
|
|
|
+ ,
|
|
|
+ cancel() {
|
|
|
+ this.$message({
|
|
|
+ message: '操作取消',
|
|
|
+ showClose: true,
|
|
|
+ type: 'info'
|
|
|
+ });
|
|
|
+
|
|
|
+ this.dialogFormVisible = false;
|
|
|
+ }
|
|
|
+ ,
|
|
|
+
|
|
|
+
|
|
|
+ gateway() {
|
|
|
+ let vm = this;
|
|
|
+ vm.$router.push('/gateway')
|
|
|
+ }
|
|
|
+ ,
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.el-form-item {
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ margin-top: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|