slaj/gw-ui/src/views/slaj/eng/attengwadi/index.vue

<template>
  <div class="system-page config-page">
    <el-card class="page-card">
      <template #header>
        <div class="card-header">
          <div class="header-left">
            <el-icon :size="20" color="#409EFF">
              <OfficeBuilding/>
            </el-icon>
            <span class="page-title">引调水</span>
          </div>
          <div class="search-right">
            <el-button type="primary" plain @click="handleAdd">
              <el-icon>
                <Plus/>
              </el-icon>
              新增
            </el-button>
            <el-button type="danger" plain :disabled="multiple" @click="handleDelete(null)">
              <el-icon>
                <Delete/>
              </el-icon>
              删除
            </el-button>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"/>
          </div>
        </div>
      </template>

      <div class="search-bar" v-show="showSearch">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="80px">
          <el-form-item label="工程名称" prop="engName">
            <el-input v-model="queryParams.engName" placeholder="请输入" clearable @keyup.enter="handleQuery"/>
          </el-form-item>
          <el-form-item label="引调水代码" prop="wadiCode">
            <el-input v-model="queryParams.wadiCode" placeholder="请输入" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">
              <el-icon>
                <Search/>
              </el-icon>
              搜索
            </el-button>
            <el-button @click="resetQuery">
              <el-icon>
                <Refresh/>
              </el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table v-loading="loading" :data="dataList" @selection-change="handleSelect" height="calc(100% - 100px)">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="工程名称" :min-width="220" prop="engName" header-align="center" align="left" :show-overflow-tooltip="true"
                         v-if="columns.engName.visible"/>
        <el-table-column label="引调水代码" :min-width="150" align="center" width="120" v-if="columns.wadiCode.visible">
          <template #default="scope">{{ scope.row.engCode || scope.row.wadiCode }}</template>
        </el-table-column>
        <el-table-column label="工程等级" align="center" v-if="columns.engGrad.visible">
          <template #default="scope">
            <dict-tag :options="slaj_eng_grad_wadi" :value="scope.row.engGrad"/>
          </template>
        </el-table-column>
        <el-table-column label="工程规模" align="center" v-if="columns.engScal.visible">
          <template #default="scope">
            <dict-tag :options="slaj_eng_scal_wadi" :value="scope.row.engScal"/>
          </template>
        </el-table-column>
        <el-table-column label="线路总长度(km)" width="120" prop="lineTotLen" align="center"
                         v-if="columns.lineTotLen.visible"/>
        <el-table-column label="设计提水扬程(104m3)" width="160" prop="desPumpDis" align="center"
                         v-if="columns.desPumpDis.visible"/>
        <el-table-column label="设计提水流量(m3/s)" width="150" prop="desPumpVol" align="center"
                         v-if="columns.desPumpVol.visible"/>
        <el-table-column label="备注" prop="note" align="center" :show-overflow-tooltip="true"
                         v-if="columns.note.visible"/>
        <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width" fixed="right">
          <template #default="scope">
            <el-button link type="primary" @click="handleUpdate(scope.row)">修改</el-button>
            <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            v-show="total > 0"
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :total="total"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="getList"
            @current-change="getList"
        />
      </div>
    </el-card>

    <el-dialog :title="title" v-model="open" width="850px" append-to-body class="eng-edit-dialog">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="150px">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="基本信息" name="basic">
            <el-row>
              <el-col :span="12">
                <el-form-item label="工程名称" prop="engName">
                  <el-input v-model="form.engName" placeholder="请输入"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="引调水代码" prop="wadiCode">
                  <el-input v-model="form.wadiCode" placeholder="请输入"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="重要程度" prop="impoGrad">
                  <el-select v-model="form.impoGrad" placeholder="请选择" style="width:100%">
                    <el-option v-for="d in DPC_IMPO_GRAD" :key="d.value" :label="d.label" :value="d.value"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工程状态" prop="engStat">
                  <el-select v-model="form.engStat" placeholder="请选择" style="width:100%">
                    <el-option v-for="d in DPC_ENG_STAT" :key="d.value" :label="d.label" :value="d.value"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="批复投资(万元)" prop="apprBudg">
                  <el-input v-model="form.apprBudg" placeholder="请输入"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否除险加固" prop="ifReinForce">
                  <el-select v-model="form.ifReinForce" placeholder="请选择" style="width:100%">
                    <el-option v-for="d in slaj_if_rein_force" :key="d.value" :label="d.label" :value="d.value"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="起点位置" prop="startLoc">
                  <el-input v-model="form.startLoc" placeholder="请输入"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="9">
                <el-form-item label="起点经度(°)" prop="startLong">
                  <el-input v-model="form.startLong" placeholder="请输入经度"/>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item label="起点纬度(°)" prop="startLat">
                  <el-input v-model="form.startLat" placeholder="请输入纬度"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <CoordPicker style="margin-left: 10px;" v-model="startCoords"/>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="终点位置" prop="endLoc">
                  <el-input v-model="form.endLoc" placeholder="请输入"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="9">
                <el-form-item label="终点经度(°)" prop="endLong">
                  <el-input v-model="form.endLong" placeholder="请输入经度"/>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item label="终点纬度(°)" prop="endLat">
                  <el-input v-model="form.endLat" placeholder="请输入纬度"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <CoordPicker style="margin-left: 10px;" v-model="endCoords"/>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="启停状态" prop="stat">
                  <el-select v-model="form.stat" placeholder="请选择" style="width:100%">
                    <el-option v-for="d in slaj_stat" :key="d.value" :label="d.label" :value="d.value"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="引调水参数" name="wadi">
            <el-row>
              <el-col :span="12">
                <el-form-item label="工程等级" prop="engGrad">
                  <el-select v-model="form.engGrad" placeholder="请选择" style="width:100%">
                    <el-option v-for="d in slaj_eng_grad_wadi" :key="d.value" :label="d.label" :value="d.value"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工程规模" prop="engScal">
                  <el-select v-model="form.engScal" placeholder="请选择" style="width:100%">
                    <el-option v-for="d in slaj_eng_scal_wadi" :key="d.value" :label="d.label" :value="d.value"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="线路总长度(km)" prop="lineTotLen">
                  <el-input v-model="form.lineTotLen" placeholder="请输入"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设计提水扬程(104m3)" prop="desPumpDis">
                  <el-input v-model="form.desPumpDis" placeholder="请输入"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="设计提水流量(m3/s)" prop="desPumpVol">
                  <el-input v-model="form.desPumpVol" placeholder="请输入"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="时间信息" name="time">
            <el-row>
              <el-col :span="12">
                <el-form-item label="开工日期" prop="startDate">
                  <el-date-picker v-model="form.startDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择"
                                  style="width:100%"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="完工日期" prop="compDate">
                  <el-date-picker v-model="form.compDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择"
                                  style="width:100%"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="备注" prop="note">
              <el-input v-model="form.note" type="textarea" :rows="2" placeholder="请输入"/>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <template #footer>
        <el-button @click="open = false">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {addEngComposite, delEngComposite, getAttEngWadi, listAttEngWadi, updateEngComposite} from "@/api/slaj/eng"
import {Delete, OfficeBuilding, Plus, Refresh, Search} from '@element-plus/icons-vue'

const {proxy} = getCurrentInstance()
const {
  DPC_IMPO_GRAD,
  DPC_ENG_STAT,
  slaj_stat,
  slaj_if_rein_force,
  slaj_eng_grad_wadi,
  slaj_eng_scal_wadi
} = proxy.useDict("DPC_IMPO_GRAD", "DPC_ENG_STAT", "slaj_stat", "slaj_if_rein_force", "slaj_eng_grad_wadi", "slaj_eng_scal_wadi")
const dataList = ref([]), open = ref(false), loading = ref(true), showSearch = ref(true), ids = ref([]),
    single = ref(true), multiple = ref(true), total = ref(0), title = ref("")
const columns = ref({
  engName: {label: '工程名称', visible: true},
  wadiCode: {label: '引调水代码', visible: true},
  startLoc: {label: '起点位置', visible: true},
  endLoc: {label: '终点位置', visible: true},
  startLong: {label: '起点经度(°)', visible: true},
  startLat: {label: '起点纬度(°)', visible: true},
  endLong: {label: '终点经度(°)', visible: true},
  endLat: {label: '终点纬度(°)', visible: true},
  engGrad: {label: '工程等级', visible: true},
  engScal: {label: '工程规模', visible: true},
  lineTotLen: {label: '线路总长度(km)', visible: true},
  desPumpDis: {label: '设计提水扬程(104m3)', visible: true},
  desPumpVol: {label: '设计提水流量(m3/s)', visible: true},
  engStat: {label: '工程状态', visible: true},
  note: {label: '备注', visible: false}
})
const WADI_NUM_FIELDS = ['startLong', 'startLat', 'endLong', 'endLat', 'apprBudg', 'lineTotLen', 'desPumpDis', 'desPumpVol']

function buildRules(numericFields, codeField, codeLabel) {
  const r = {
    engName: [{required: true, message: '工程名称不能为空', trigger: 'blur'}],
    [codeField]: [{required: true, message: codeLabel + '不能为空', trigger: 'blur'}]
  }
  numericFields.forEach(f => {
    r[f] = [{
      validator: (rule, value, cb) => {
        if (value === '' || value === null || value === undefined) return cb()
        if (isNaN(Number(value))) cb(new Error('请输入数值'))
        else cb()
      }, trigger: 'blur'
    }]
  })
  return r
}

const data = reactive({
  form: {},
  queryParams: {pageNum: 1, pageSize: 10, engName: null, wadiCode: null},
  rules: buildRules(WADI_NUM_FIELDS, 'wadiCode', '引调水代码')
})
const {form, queryParams, rules} = toRefs(data)

const activeTab = ref('basic')

const startCoords = computed({
  get() {
    const {startLong, startLat} = form.value
    if (startLong != null && startLat != null) return [Number(startLong), Number(startLat)]
    return null
  },
  set(val) {
    if (val) {
      form.value.startLong = val[0]
      form.value.startLat = val[1]
    } else {
      form.value.startLong = null
      form.value.startLat = null
    }
  }
})
const endCoords = computed({
  get() {
    const {endLong, endLat} = form.value
    if (endLong != null && endLat != null) return [Number(endLong), Number(endLat)]
    return null
  },
  set(val) {
    if (val) {
      form.value.endLong = val[0]
      form.value.endLat = val[1]
    } else {
      form.value.endLong = null
      form.value.endLat = null
    }
  }
})

function getList() {
  loading.value = true;
  listAttEngWadi(queryParams.value).then(r => {
    dataList.value = r.rows;
    total.value = r.total;
    loading.value = false
  })
}

function handleQuery() {
  queryParams.value.pageNum = 1;
  getList()
}

function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery()
}

function handleSelect(s) {
  ids.value = s.map(i => i.guid);
  single.value = s.length !== 1;
  multiple.value = !s.length
}

const WADI_FIELDS = ['engName', 'wadiCode', 'startLoc', 'endLoc', 'startLong', 'startLat', 'endLong', 'endLat', 'impoGrad', 'apprBudg', 'engStat', 'stat', 'ifReinForce', 'engGrad', 'engScal', 'lineTotLen', 'desPumpDis', 'desPumpVol', 'startDate', 'compDate', 'note']

function reset() {
  const f = {};
  WADI_FIELDS.forEach(k => f[k] = null);
  f.stat = "1";
  f.engGuid = null;
  f.guid = null;
  form.value = f;
  proxy.resetForm("formRef")
}

function handleAdd() {
  reset();
  activeTab.value = 'basic';
  open.value = true;
  title.value = "添加引调水工程"
}

function handleUpdate(row) {
  reset();
  activeTab.value = 'basic';
  const g = row ? row.guid : ids.value[0];
  getAttEngWadi(g).then(r => {
    form.value = r.data;
    open.value = true;
    title.value = "修改引调水工程"
  })
}

function submit() {
  proxy.$refs.formRef.validate(v => {
    if (v) {
      const f = form.value
      const payload = {
        objEng: {guid: f.guid, engCode: f.wadiCode, engName: f.engName, engType: '07'},
        base: {
          guid: f.guid,
          engCode: f.wadiCode,
          engName: f.engName,
          engType: '07',
          impoGrad: f.impoGrad,
          engScal: f.engScal,
          apprBudg: f.apprBudg,
          startDate: f.startDate,
          compDate: f.compDate,
          engStat: f.engStat,
          orgGuid: f.orgGuid,
          projGuid: f.projGuid,
          ifReinForce: f.ifReinForce,
          stat: f.stat,
          note: f.note
        },
        attr: {...f}
      }
      const fn = f.guid ? updateEngComposite : addEngComposite;
      fn(payload).then(() => {
        proxy.$modal.msgSuccess("成功");
        open.value = false;
        getList()
      })
    }
  })
}

function handleDelete(row) {
  const g = row ? row.guid : ids.value.join(",");
  proxy.$modal.confirm('确认删除？').then(() => delEngComposite(g, 'wadi')).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功")
  })
}

function handleExport() {
  proxy.download(`/eng/attr/wadi/export`, {...queryParams.value}, `引调水工程_${Date.now()}.xlsx`)
}

getList()
</script>