jn_manager/src/views/pointConfiguration/equipmentAllocation/index.vue

<template>
  <div class="table-container">
    <!-- <vab-query-form> -->
    <!-- <vab-query-form-left-panel> -->
    <el-row>
      <el-button @click="getBack" style="float: right; margin: 0 0 10px 0">
        返回
      </el-button>
    </el-row>
    <el-form
      ref="form"
      :model="queryForm"
      :inline="true"
      @submit.native.prevent
    >
      <el-form-item label="类型">
        <el-select v-model="form.type" placeholder="请选择" clearable @change="typeChange">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="名称">
        <el-select v-model="form.name" placeholder="请选择" clearable>
          <el-option
            v-for="item in nameOptions"
            :key="item.uniformcode"
            :label="item.name"
            :value="item.uniformcode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-search"
          type="primary"
          native-type="submit"
          @click="fetchData"
        >
          查询
        </el-button>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button icon="el-icon-plus" type="primary" @click="handleAdd">
          添加
        </el-button>
        <el-button icon="el-icon-delete" type="danger" @click="handleDelete">
          删除
        </el-button>
      </el-form-item>
    </el-form>
    <!-- </vab-query-form-left-panel> -->
    <!-- <vab-query-form-right-panel> -->
    <!-- <UploadExcel style="margin-left: 10px;" @getResult="getMyExcelData"></UploadExcel>
        <ExportExcel :exportList="exportExcel" partsName="公司"></ExportExcel> -->
    <!-- </vab-query-form-right-panel> -->
    <!-- </vab-query-form> -->
    <el-table
      ref="tableSort"
      v-loading="listLoading"
      :data="list"
      :element-loading-text="elementLoadingText"
      :height="height"
      @selection-change="setSelectRows"
    >
      <el-table-column
        show-overflow-tooltip
        type="selection"
        width="55"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="id"
        prop="id"
        align="center"
        sortable
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="编码"
        prop="code"
        align="center"
        sortable
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="名称"
        prop="name"
        align="center"
        sortable
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="型号"
        prop="model"
        align="center"
        sortable
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="统一编码"
        prop="uniformcode"
        align="center"
        sortable
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="场站编号"
        prop="windpowerstationid"
        align="center"
        sortable
      ></el-table-column>
      <el-table-column show-overflow-tooltip label="操作" width="180px">
        <template #default="{ row }">
          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(row)">删除</el-button>
          <!-- <el-button type="text" @click="handleDelete(row)">设备点表配置</el-button>
          <el-button type="text" @click="handleDelete(row)">场站点表配置</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :background="background"
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
    <table-edit
      ref="edit"
      :options="options"
      @save-success="fetchData"
    ></table-edit>
  </div>
</template>
<script>
  // import UploadExcel from '@/components/UploadExcel/index'
  // import ExportExcel from '@/components/ExportExcel/index'
  import TableEdit from './components/TableEdit'
  import api from '@/api/pointConfiguration'
  export default {
    props: {
      showValue: {
        type: Object,
        default: {},
      },
    },
    components: {
      // UploadExcel,
      // ExportExcel,
      TableEdit,
    },
    data() {
      return {
        ArrayData: [],
        nameOptions: [],
        cascaderSel: '',
        optionscascader: [
          {
            value: 'zhinan',
            label: '指南',
            children: [
              {
                value: 'shejiyuanze',
                label: '设计原则',
                children: [
                  {
                    value: 'yizhi',
                    label: '一致',
                  },
                  {
                    value: 'fankui',
                    label: '反馈',
                  },
                  {
                    value: 'xiaolv',
                    label: '效率',
                  },
                  {
                    value: 'kekong',
                    label: '可控',
                  },
                ],
              },
              {
                value: 'daohang',
                label: '导航',
                children: [
                  {
                    value: 'cexiangdaohang',
                    label: '侧向导航',
                  },
                  {
                    value: 'dingbudaohang',
                    label: '顶部导航',
                  },
                ],
              },
            ],
          },
        ],
        typeOptions: [
          { value: 'fjjs', label: '风机计算' },
          { value: 'czjs', label: '场站计算' },
          { value: 'fjjc', label: '风机基础点' },
        ],
        form: {
          type: '',
          name: '',
        },
        //
        // fuzzyQuery: '',
        listLoading: true,
        list: [],
        options: [],
        exportExcel: [],
        elementLoadingText: '正在加载...',
        selectRows: '',
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        background: true,
        exportList: [],
        queryForm: {
          pageNo: 1,
          pageSize: 20,
        },
      }
    },
    created() {
      this.form.type = this.showValue.type
      this.form.name = this.showValue.name
      this.fetchData()
      this.typeFetchDataAll()
    },
    computed: {
      height() {
        return this.$baseTableHeight() + 50
      },
    },
    methods: {
      typeChange(data){
        this.form.name = ""
        this.ArrayData.forEach(element => {
          if(data ===  element.value){
            this.nameOptions = element.data
          }
        });
      },
      typeFetchDataAll(){
        api.standardpointList({
          id: '',
          uniformcode: '',
          name: '',
          type: '',
          pageNum: 1,
          pageSize: 500,
        }).then(res => {
          if (res.data) {
            let data = res.data.records
            this.typeOptions.forEach((item) => {
              let obj = {}
              obj.value = item.value
              obj.label = item.label
              obj.data = []
              data.forEach((element) => {
                if (element.type == item.value) {
                  obj.data.push(element)
                }
              })
              this.ArrayData.push(obj)
            })
            this.ArrayData.forEach(element => {
              if(element.value == this.showValue.type){
                this.nameOptions = element.data
              }
            });
          }
        })
      },
      getBack() {
        this.$emit('cutState', 1)
      },
      getMyExcelData(val) {
        val.forEach((item) => {
          api.addCompanys(item).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '添加成功!',
              })
              this.fetchData()
            }
          })
        })
      },
      fetchData() {
        this.listLoading = true
        api
          .windturbinetestingpointnewList({
            id: '',
            type: this.form.type,
            name: this.form.name,
            pageNum: this.queryForm.pageNo,
            pageSize: this.queryForm.pageSize,
          })
          .then((res) => {
            if (res.data) {
              this.listLoading = false
              this.total = res.data.total
              this.list = res.data.records
              let exportExcel = []
              res.data.records.forEach((item) => {
                exportExcel.push({
                  id: item.id,
                  name: item.name,
                  rid: item.rid,
                })
              })
              this.exportExcel = exportExcel
            }
          })
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      handleAdd() {
        this.$refs['edit'].showEdit()
      },
      handleEdit(row) {
        this.$refs['edit'].showEdit(row)
      },
      handleDelete(row) {
        if (row.id || this.selectRows.length > 0) {
          this.$baseConfirm('你确定要删除吗', null, async () => {
            let ids = ''
            if (this.selectRows.length > 0) {
              ids = this.selectRows.map((item) => item.id).join()
            }
            api
              .deleteWindturbinetestingpointnew({
                id: row.id || ids,
              })
              .then((res) => {
                if (res.data) {
                  this.$baseMessage('删除成功', 'success')
                  this.fetchData()
                }
              })
          })
        } else {
          this.$baseMessage('未选中任何行', 'error')
          return false
        }
      },
      setSelectRows(val) {
        this.selectRows = val
      },
    },
  }
</script>
<style lang="less" scoped>
  a {
    float: right;
  }
</style>