ipp-tl/ipp-ap/src/views/an/parsingChannel/parsingUrl/index.vue

<template>
  <div class="execution">
    <basic-container>
      <div style="margin-bottom: .5%">
        <span>场站：</span>
        <el-select v-model="stationCode" placeholder="请选择场站" clearable>
          <el-option
            v-for="item in stationList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button-group style="margin-left: 1%">
          <el-button type="primary" icon="el-icon-search" :loading="tableLoading" @click="getList()">查询</el-button>
          <el-button type="primary" icon="el-icon-circle-plus-outline" @click="handleAdd()" :loading="tableLoading">添加</el-button>
        </el-button-group>
      </div>

      <el-table
        :data="tableData"
        :header-cell-style="{background:'#ECF1FE'}"
        border
        style="width: 100%">
        <el-table-column prop="stationCode" label="场站名称" align="center"
                         :formatter="formatStationCode"></el-table-column>
        <el-table-column align="center" prop="cid" label="通道名称" :formatter="formatCid"></el-table-column>
        <el-table-column align="center" prop="urlStatus" label="使用状态" :formatter="formatStatus"></el-table-column>
        <el-table-column align="center" prop="url" label="路径"></el-table-column>
        <el-table-column align="center" prop="forecastManufactor" label="预测厂家"
                         :formatter="formatForecastManufactor"></el-table-column>

        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="warning"
              :loading="tableLoading"
              @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              :loading="tableLoading"

              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.page.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="this.page.pageSize"
        layout="->,total, sizes, prev, pager, next, jumper"
        :total="this.page.total">
      </el-pagination>

      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        :append-to-body="true"
        :close-on-click-modal="false"
        width="30%"
        :before-close="handleClose">
        <el-form ref="elform" :model="form" :rules="rules" label-width="80px">
          <el-form-item prop="stationCode" label="场站编码">
            <el-select v-model="form.stationCode" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="item in stationList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="cid" label="通道名字">
            <el-select v-model="form.cid" placeholder="请选择" style="width: 100%" :disabled="true">
              <el-option
                v-for="item in editChannelInfo"
                :key="item.id"
                :label="item.channelName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="urlStatus" label="使用状态">
            <el-select v-model="form.urlStatus" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="item in urlStatusOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="url" label="路径">
            <el-input v-model="form.url"></el-input>
          </el-form-item>
          <el-form-item prop="forecastManufactor" label="预测厂家">
            <el-select v-model="form.forecastManufactor" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="item in forecastManufactorList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div style="text-align: center">
          <el-button type="primary" @click="handleUpdate">保存</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </div>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
import {fetchList, addObj, putObj, delObj} from '@/api/an/ParsingUrl'
import {fetchListForSelects} from '@/api/an/forecastManufactor'

import {mapGetters} from 'vuex'
import mixin from '@/mixins/mixin.js'
import {getStation} from "@/api/inverterinfo";

export default {
  name: 'ParsingUrl',
  mixins: [mixin],
  props: {
    channelId: {
      type: String
    },
    channelInfo: {type: Object}
  },
  watch: {
    channelId() {
      this.getList()
    },
    channelInfo: {
      immediate: true,// 第一次立即监听
      handler(value) {
        this.editChannelInfo = []
        this.editChannelInfo.push(value)
      }
    }
  },
  data() {
    return {
      form: {},
      tunnel: {},
      searchForm: {},
      tableData: [],
      editChannelInfo: [],//父组件编辑的通道信息
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,
      stationCode:'',
      forecastManufactorList: [],// 预测厂家数据
      stationList: [],// 场站数据
      dialogVisible: false,
      dialogType: '',//新增还是编辑
      title:'',//弹框的文本
      urlStatusOption: [{value: '1', label: '使用'}, {value: '2', label: '停用'}],
      rules: {
        stationCode: {required: true, message: '请选择通道名称', trigger: 'blur'},
        urlStatus: {required: true, message: '请选择状态', trigger: 'blur'},
        url: {required: true, message: '请输入路径', trigger: 'blur'},
        forecastManufactor: {required: true, message: '请选择预测厂家', trigger: 'blur'},
      }
    }
  },
  computed: {

    ...mapGetters(['permissions']),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permissions.da_tunnel_info_add, false),
        delBtn: this.vaildData(this.permissions.da_tunnel_info_del, false),
        editBtn: this.vaildData(this.permissions.da_tunnel_info_edit, false)
      };
    }
  },
  created() {
    this.getSelects()
  },
  methods: {
    getSelects() {
      // 预测厂家数据
      fetchListForSelects().then(response => {
        this.forecastManufactorList = response.data.data
      })
      // 场站数据
      getStation().then(response => {
        this.stationList = response.data.data
      })
      this.getList()
    },
    getList() {
      var page = this.page
      // if (this.searchForm.stationCode != '') {
      //   this.form.stationCode =  this.searchForm.stationCode
      // }
      // this.form.cId = this.channelId
      // this.searchForm = this.form
      // console.log(this.form)
      if(this.stationCode !== null && this.stationCode !== undefined && this.stationCode !== ''){
        this.searchForm ={stationCode:this.stationCode,cId:this.editChannelInfo[0].id,delFlag:0}
      }else {
        this.searchForm = {delFlag:0,cId:this.editChannelInfo[0].id}
      }
      this.tableLoading = true
      fetchList(Object.assign({
        current: page.currentPage,
        size: page.pageSize
      }, this.searchForm)).then(response => {
        this.tableData = response.data.data.records
        this.page.total = response.data.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.page.currentPage = 1
      this.getList();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList();
    },
    handleAdd() {
      this.form = {}
      this.dialogType = "add"
      this.title = '新增&保存'
      this.form.cid = this.channelId
      this.dialogVisible = true
    },
    // 编辑按钮
    handleEdit(index, row) {
      this.form = row
      this.dialogType = "edit"
      this.title = '编辑&保存'
      this.dialogVisible = true

    },
    // 删除按钮
    handleDelete(index, row) {
      this.rowDel(row)
    },

    rowDel: function (row, index) {
      this.$confirm('是否确认删除ID为' + row.id, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(row.id)
      }).then(data => {
        this.$message.success('删除成功')
        this.getList(this.page)
      })
    },
    handleUpdate: function () {
      if (this.dialogType === 'add') {
        // row.cid = this.channelId
        // row.stationCode = this.stationCode
        addObj(this.form).then(data => {
          this.$message.success('添加成功')
          this.getList()
          this.dialogVisible = false
        }).catch((e) => {
          console.log('添加失败：' + e)
        });
      } else {
        putObj(this.form).then(data => {
          this.$message.success('修改成功')
          this.getList()
          this.dialogVisible = false
        }).catch(() => {
          console.log('修改失败：' + e)
        });
      }

    },
    // 弹框的关闭前的回调
    handleClose(done) {
      this.form = {}
      this.$nextTick(() => {
        this.$refs.elform.resetFields();
      })
      done()
    },
    handleCancel() {
      this.$nextTick(() => {
        this.$refs.elform.resetFields();
      })
      this.form = {}
      this.dialogVisible = false
    },
    formatStatus(row) {
      const urlStatus = this.urlStatusOption.find(w => w.value === row.urlStatus)
      return urlStatus !== undefined ? urlStatus.label : row.urlStatus
    },
    formatCid(row) {
      return this.editChannelInfo[0].id === row.cid ? this.editChannelInfo[0].channelName : row.cid
    },
    formatStationCode(row) {
      const station = this.stationList.find(w => w.value === row.stationCode)
      return station !== undefined ? station.label : row.stationCode
    },
    formatForecastManufactor(row) {
      const forecastManufactor = this.forecastManufactorList.find(w => w.value === row.forecastManufactor)
      return forecastManufactor !== undefined ? forecastManufactor.label : row.forecastManufactor
    }
  }
}
</script>