点位批量添加优化

xiangpei

2024-03-12 5c628344a3f0cd4fd6a7ce48696e22b7fb7314f8

点位批量添加优化

 src/api/platform/region.js

@@ -50,3 +50,12 @@
    method: 'get'
  })
}

// 获取区县级联选择
export function getCascader() {
  return request({
    url: '/region/cascader',
    method: 'get'
  })
}


 src/views/system/point/index.vue

@@ -123,7 +123,7 @@
          <el-input v-model="tempForm.pointName" placeholder="请输入点位名称" />
        </el-form-item>
        <el-form-item label="运维单位" prop="unitId">
          <el-select v-model="tempForm.unitId"  placeholder="运维单位">
          <el-select :disabled="title === '修改运维点位'" v-model="tempForm.unitId"  placeholder="运维单位">
            <el-option
              v-for="item in unitList"
              :key="item.id"
@@ -134,6 +134,7 @@
        </el-form-item>
        <el-form-item label="点位时区" prop="timezone">
          <el-date-picker
            :disabled="title === '修改运维点位'"
            @change="dateChange"
            v-model="tempForm.timezone"
            type="daterange"
@@ -147,41 +148,19 @@
        </el-form-item>
        <el-form-item>
          <div style="display: flex;flex-direction: row-reverse">
            <el-button @click="nextAdd" type="primary" plain>继续添加</el-button>
            <el-button @click="nextAdd" type="primary" plain>添加点位</el-button>
          </div>
        </el-form-item>
        <div class="point-row" v-for="(point,index) in tempFormList">
            <div class="row-item">
              <el-input :disabled="editingIndex!==index" v-model="point.pointName" placeholder="点位名称"></el-input>
        <el-row style="min-height: 200px;max-height: 400px; overflow-y: auto">
          <el-col class="col-item" v-for="(point) in tempFormList" :span="8">
            <div style="margin-right: 5px">
              <el-cascader v-model="point.region" :options="regionList" placeholder="请选择区域" :show-all-levels="false"></el-cascader>
            </div>
            <div class="row-item">
              <el-select :disabled="editingIndex!==index" v-model="point.unitId"  placeholder="运维单位">
                <el-option
                  v-for="item in unitList"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id">
                </el-option>
              </el-select>
            <div v-if="title === '修改运维点位'">
              <el-button @click="removeRegion(point)" type="danger" icon="el-icon-delete" circle></el-button>
            </div>
            <div class="row-item">
              <el-date-picker
                :disabled="editingIndex!==index"
                v-model="point.timezone"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </div>
            <div  class="row-item">
              <el-button v-show="editingIndex!==index" @click="editPointItem(index)" type="danger" size="small" plain>修改</el-button>
              <el-button v-show="editingIndex===index" @click="editFinishItem(index)" type="success" size="small" plain>完成</el-button>
            </div>
          </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -189,52 +168,19 @@
      </div>
    </el-dialog>

    <!-- 修改运维点位对话框 -->
    <el-dialog :title="title" :visible.sync="editOpen" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="点位名称" prop="pointName">
          <el-input v-model="form.pointName" placeholder="请输入点位名称" />
        </el-form-item>
        <el-form-item label="运维单位" prop="unitId">
          <el-select v-model="form.unitId"  placeholder="运维单位">
            <el-option
              v-for="item in unitList"
              :key="item.id"
              :label="item.value"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="点位时区" prop="timezone">
          <el-date-picker
            @change="dateChange"
            v-model="form.timezone"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="updateCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listPoint, getPoint, delPoint, addPoint, addPointBatch, updatePoint } from "@/api/platform/point";
import { unitSelect } from "@/api/platform/unit";
import { getCascader } from '../../../api/platform/region'

export default {
  name: "Point",
  data() {
    return {
      regionList: [],
      // 正在修改第几个
      editingIndex: null,
      // 遮罩层
@@ -296,8 +242,18 @@
  created() {
    this.getList();
    this.getUnitSelect();
    this.getCascader();
  },
  methods: {
    removeRegion(item) {
      this.tempFormList = this.tempFormList.filter(data => data !== item)
    },
    // 获取区县级联
    getCascader() {
      getCascader().then(res => {
        this.regionList = res.data;
      })
    },
    // 点位项修改完成
    editFinishItem(index) {
      this.editingIndex = null;
@@ -322,9 +278,9 @@
    },
    // 继续添加点位
    nextAdd() {
      this.formList.push(this.tempForm);
      this.tempFormList.push(this.tempForm);
      this.tempForm = {};
      let item = {}
      this.formList.push(item);
      this.tempFormList.push(item);
    },
    getUnitSelect() {
      // 运维单位下拉列表
@@ -395,7 +351,7 @@
      getPoint(id).then(response => {
        this.form = response.data;
        this.form.timezone = [this.form.startTime, this.form.endTime]
        this.editOpen = true;
        this.open = true;
        this.title = "修改运维点位";
      });
    },
@@ -451,16 +407,11 @@
</script>

<style scoped>
.point-row {
.col-item {
  margin: 5px 0;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.row-item {
  margin-right: 5px;
}
.row-item:nth-last-child {
  margin-right: 0;
}
</style>

 src/views/system/region/index.vue

@@ -20,12 +20,12 @@
        />
      </el-form-item>
      <el-form-item label="区县" prop="county">
        <el-select v-model="queryParams.parentId" placeholder="请选择区县">
        <el-select v-model="queryParams.parentId" clearable @change="handleQuery" placeholder="请选择区县">
          <el-option v-for="item in countyList" :label="item.value" :value="item.id" :key="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="地方级别" prop="county">
        <el-select v-model="queryParams.regionLevel" clearable placeholder="请选择区县">
        <el-select v-model="queryParams.regionLevel" clearable @change="handleQuery" placeholder="请选择区县">
          <el-option label="市" value="city" />
          <el-option label="区县" value="county" />
          <el-option label="街道" value="street" />
@@ -83,7 +83,13 @@
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="regionList" @selection-change="handleSelectionChange">
    <el-table v-loading="loading"
              :data="regionList"
              row-key="id"
              border
              default-expand-all
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="区域全称" align="center" prop="fullName" />
      <el-table-column label="区域简称" align="center" prop="simpleName" />