本地实现表格的增删改查

本地实现表格的增删改查

HTML

    <el-dialog :title="alertAreaTitle" :visible.sync="areaDialogVisible" :close-on-click-modal="false" append-to-body width="35%">
      <el-form :model="areaForm" :rules="rules" v-if="areaDialogVisible" ref="areaForm" label-width="130px">
        <el-col :span="12">
          <el-form-item label="名称" prop="name">
            <el-input v-model="areaForm.name" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="areaForm.remark" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="高度上限" prop="maxHeight">
            <el-input v-model="areaForm.maxHeight" clearable>
              <template slot="append">米</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="高度下限" prop="minHeight">
            <el-input v-model="areaForm.minHeight" clearable>
              <template slot="append">米</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="高度类型" prop="type">
            <el-select v-model="areaForm.type" placeholder="请选择类型" clearable>
              <el-option v-for="(item, index) in optionsData['height_type']" :key="index" :label="item.name" :value="item.val"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <template v-if="areaShowFlag == '1' || areaShowFlag == '3'">
          <el-col :span="12">
            <el-form-item label="圆心点名称" prop="circlePointName">
              <el-input v-model="areaForm.circlePointName" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="圆心点经度" prop="longitude">
              <el-input v-model="areaForm.longitude" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="圆心点纬度" prop="latitude">
              <el-input v-model="areaForm.latitude" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="半径" prop="radius">
              <el-input v-model="areaForm.radius" clearable>
                <template slot="append">千米</template>
              </el-input>
            </el-form-item>
          </el-col>
        </template>
        <template v-if="areaShowFlag == '3' || areaShowFlag == '4'">
          <el-col :span="12">
            <el-form-item label="航路宽度" prop="width">
              <el-input v-model="areaForm.width" clearable>
                <template slot="append">千米</template>
              </el-input>
            </el-form-item>
          </el-col>
        </template>
        <!-- areaShowFlag:2 "多边形" 4 "航线" -->
        <template v-if="areaShowFlag == '2' || areaShowFlag == '4'">
          <el-col :span="24">
            <div class="trendsAddData">
              <div>顶点信息</div>
              <div>
                <el-button @click="addApex">添加行</el-button>
                <el-button @click="delApex">删除行</el-button>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <el-table border class="apex" ref="multipleTable" :data="areaForm.locals" :row-style="{ height: 0 + 'px' }" :cell-style="{ height: 0 + 'px' }" :header-cell-style="{
                height: '10px',
                padding: '0px',
                fontSize: '18px',
              }" @selection-change="apexSelectionChange">
              <el-table-column type="selection" width="55" align="center">
              </el-table-column>
              <el-table-column prop="name" label="顶点名称" align="center">
                <template slot-scope="scope">
                  <el-form-item class="all">
                    <el-input type="text" v-model="scope.row.name" clearable placeholder="请输入"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="longitude" label="点经度" align="center">
                <template slot-scope="scope">
                  <el-form-item :prop="'locals.' + scope.$index + '.longitude'" :rules="rules.longitude" class="all">
                    <el-input type="text" v-model="scope.row.longitude" clearable placeholder="请输入"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="latitude" label="点纬度" align="center">
                <template slot-scope="scope">
                  <el-form-item :prop="'locals.' + scope.$index + '.latitude'" :rules="rules.latitude" class="all">
                    <el-input type="text" v-model="scope.row.latitude" clearable placeholder="请输入"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="点类型" align="center">
                <template slot-scope="scope">
                  <el-form-item class="all">
                    <el-select v-model="scope.row.type" placeholder="请选择类型" clearable>
                      <el-option v-for="(item, index) in optionsData['point_type']" :key="index" :label="item.name" :value="item.val"></el-option>
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </template>
        <template v-if="areaShowFlag == '3'">
          <el-col :span="12">
            <el-form-item label="扇形起始角度" prop="startAngle">
              <el-input v-model.number="areaForm.startAngle" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="扇形结束角度" prop="endAngle">
              <el-input v-model.number="areaForm.endAngle" clearable></el-input>
            </el-form-item>
          </el-col>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetArea('areaForm')">取 消</el-button>
        <el-button type="primary" @click="addAreaSubmit('areaForm')">确 定</el-button>
      </div>
    </el-dialog>

data(){
return{
alertAreaTitle:"",
areaDialogVisible:false,
areaForm:{},
rules: {
        number: [
          { required: true, message: "请选择飞行计划编号", trigger: "blur" },
          {
            min: 1,
            max: 30,
            message: "长度在1到30个字符",
          },
        ],
        type: [{ required: true, message: "请选择类型", trigger: "change" }],
        companyId: [
          { required: true, message: "请选择公司名称", trigger: "change" },
        ],
        taskFlag: [
          { required: true, message: "请选择飞行任务标识", trigger: "change" },
        ],
        taskNature: [
          { required: true, message: "请输入任务性质", trigger: "blur" },
          {
            min: 1,
            max: 30,
            message: "长度在1到30个字符",
          },
        ],
        airCrew:[
          {
            min: 1,
            max: 100,
            message: "长度在1到100个字符",
          },
        ],
        pilot:[
          {
            min: 1,
            max: 50,
            message: "长度在1到50个字符",
          },
        ],
        flightRules: [
          { required: true, message: "请输入飞行规则", trigger: "change" },
        ],
        taskDescribe: [
          { required: true, message: "请输入任务描述", trigger: "blur" },
          {
            min: 1,
            max: 255,
            message: "名称长度在1到255个字符",
            trigger: "blur",
          },
        ],
        remark: [
          {
            min: 0,
            max: 255,
            message: "名称长度在0到255个字符",
            trigger: "blur",
          },
        ],
        callSign: [
          { required: true, message: "请输入呼号", trigger: "blur" },
          {
            min: 1,
            max: 11,
            message: "名称长度不能超过11位",
            trigger: "blur",
          },
        ],
        time: [{ required: true, message: "请输入预计时间", trigger: "blur" }],
        contactPerson: [
          { required: true, message: "请输入联系人", trigger: "blur" },
          {
            min: 1,
            max: 40,
            message: "长度在1到40个字符",
          },
        ],
        contact: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^(?:(?:\+|00)86)?1\d{10}$/,
            message: "请输入正确的手机号",
          },
        ],
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        maxHeight: [
          { required: true, message: "请输入高度上限", trigger: "blur" },
          {
            pattern: /^\d+$/,
            message: "请输入数字",
          },
        ],
        minHeight: [
          { required: true, message: "请输入高度下限", trigger: "blur" },
          {
            pattern: /^\d+$/,
            message: "请输入数字",
          },
        ],
        circlePointName: [
          { required: true, message: "请输入圆心点名称", trigger: "blur" },
        ],
        longitude: [
          { required: true, message: "请输入经度", trigger: "blur" },
          {
            pattern:
              /^[\-\+]?(((\d|[1-9]\d|1[0-7]\d|0)\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/, //eslint-disable-line
            message: "请输入 -180.0～+180.0以内的数字",
          },
        ],
        latitude: [
          { required: true, message: "请输入纬度", trigger: "blur" },
          {
            pattern:
              /^[\-\+]?((0|([1-8]\d?))(\.\d{1,6})?|90\.0{0,6}|[0-8]?\d{1}|90)$/, //eslint-disable-line
            message: "请输入-90.0～+90.0以内的数字",
          },
        ],
        radius: [
          { required: true, message: "请输入半径", trigger: "blur" },
          {
            pattern: /^\d+$/,
            message: "请输入数字",
            trigger: "blur",
          },
        ],
        width: [
          { required: true, message: "请输入宽度", trigger: "blur" },
          {
            pattern: /^\d+$/,
            message: "请输入数字",
            trigger: "blur",
          },
        ],
        startAngle: [
          { required: true, message: "请输入扇形起始角度", trigger: "blur" },
          {
            pattern: /^\d+$/,
            message: "请输入数字",
            trigger: "blur",
          },
        ],
        endAngle: [
          { required: true, message: "请输入扇形结束角度", trigger: "blur" },
          {
            pattern: /^\d+$/,
            message: "请输入数字",
            trigger: "blur",
          },
        ],
      },
}}

 // 新增多边形
    addPolygon () {
      this.alertAreaTitle = "新增多边形区域";
      this.areaSign = "addSign";
      this.areaShowFlag = "2";
      this.areaForm = {
        id: new Date().getTime(),
        locals: [],
        // list: [],
      };
      this.areaDialogVisible = true;
    },
    // 编辑多边形
    editPolygon (row) {
      console.log(row,'======编辑多边形');
      this.alertAreaTitle = "编辑多边形区域";
      this.areaSign = "editSign";
      this.areaShowFlag = "2";
      this.areaForm = JSON.parse(JSON.stringify(row));
      console.log(this.polygonData, "this.areaForm");
      // this.areaForm.locals = row.locals;
      // this.areaForm.list = row.locals;
      this.areaDialogVisible = true;
    },
    // 删除多边形
    delPolygon (row) {
      console.log(row, "空域表格删除");
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let index = this.polygonData.indexOf(row);
          this.polygonData.splice(index, 1);
          let index1 = this.allAirAreaData.indexOf(row);
          this.allAirAreaData.splice(index1, 1);
          this.$message.success("删除成功！");
        })
        .catch(() => {
          this.$message.info("取消删除！");
        });
    },

// // 新建空域信息弹窗提交
    addAreaSubmit (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          console.log(valid, "valid");
          // 新建
          if (this.areaSign == "addSign") {
            if (this.alertAreaTitle == "新增圆形区域") {
              if (this.creatAreaCheckout1()) {
                this.creatAreaSubmit(this.circleData);
              }
            }
            if (this.alertAreaTitle == "新增扇形区域") {
              if (this.creatAreaCheckout1()) {
                this.creatAreaSubmit(this.shapedData);
              }
            }
            if (this.alertAreaTitle == "新增多边形区域") {
              if (this.creatAreaCheckout1() && this.areaCheckout2(3)) {
                this.creatAreaSubmit(this.polygonData);
              }
            }
            if (this.alertAreaTitle == "新增航线区域") {
              if (this.creatAreaCheckout1() && this.areaCheckout2(2)) {
                this.creatAreaSubmit(this.airLineData);
              }
            }
          } else {
            // 编辑
            if (this.alertAreaTitle == "编辑圆形区域") {
              if (this.editAreaCheckout1()) {
                this.editAreaSubmit(this.circleData, null);
              }
            }
            if (this.alertAreaTitle == "编辑扇形区域") {
              if (this.editAreaCheckout1()) {
                this.editAreaSubmit(this.shapedData, null);
              }
            }
            if (this.alertAreaTitle == "编辑多边形区域") {
              if (this.editAreaCheckout1() && this.areaCheckout2(3)) {
                this.editAreaSubmit(this.polygonData);
              }
            }
            if (this.alertAreaTitle == "编辑航线区域") {
              if (this.editAreaCheckout1() && this.areaCheckout2(2)) {
                this.editAreaSubmit(this.airLineData);
              }
            }
          }
        }
      });
    },
    // 新增空域信息提交（名称、高度下限）校验
    creatAreaCheckout1 () {
      // 校验名称是否重复
      if (!onlyVerify(this.allAirAreaData, "name", this.areaForm.name)) {
        this.$message.error("名称已存在！");
        return false;
      }
      // 校验高度上限和下限关系
      if (Number(this.areaForm.maxHeight) < Number(this.areaForm.minHeight)) {
        this.$message.error("高度下限应小于高度上限！");
        return false;
      }
      return true;
    },
    //新增空域信息提交-(顶点信息)信息校验
    areaCheckout2 (count) {
      // 校验顶点信息是否为空
      if (
        this.areaForm.locals.length < count ||
        this.areaForm.locals.filter(
          (item) =>
            !(
              item.name &&
              item.longitude != "" &&
              item.latitude != "" &&
              item.type
            )
        ).length
      ) {
        this.$message.error(`顶点信息最少${count}条且内容不能为空！`);
        return false;
      }
      return true;
    },
    creatAreaSubmit (currentList) {
      // 把数据添加到表格数组中
      // this.$set(this.areaForm, "locals", this.areaForm.locals);
      currentList.push({ ...this.areaForm });
      this.allAirAreaData.push({ ...this.areaForm });
      this.areaDialogVisible = false;
      this.$message.success("新建成功！");
    },
    //编辑空域信息提交-(名称、高度下限)信息校验
    editAreaCheckout1 () {
      // 校验名称是否重复
      if (
        !onlyEditVerify(
          this.allAirAreaData,
          "name",
          this.areaForm.name,
          this.areaForm.id
        )
      ) {
        this.$message.error("名称已存在！");
        return false;
      }
      // 校验高度上限和下限关系
      if (Number(this.areaForm.maxHeight) < Number(this.areaForm.minHeight)) {
        this.$message.error("高度下限应小于高度上限！");
        return false;
      }
      return true;
    },
    //保存空域信息
    editAreaSubmit (currentList) {
      // 根据id查找当前数据的下标
      let index = currentList.findIndex((item) => item.id === this.areaForm.id);
      // 修改当前数据
      currentList[index] = this.$set(currentList, index, this.areaForm);
      let index1 = this.allAirAreaData.findIndex(
        (item) => item.id === this.areaForm.id
      );
      this.allAirAreaData[index1] = this.$set(
        this.allAirAreaData,
        index1,
        this.areaForm
      );
      console.log(currentList, "currentList");
      // console.log(list, "list");
      // if (this.areaForm.locals != null && this.areaForm.locals) {
      //   currentList[index].locals = this.areaForm.locals;
      // }
      this.areaDialogVisible = false;
      this.$message.success("编辑成功！");
    },
    // 新建空域信息弹窗取消
    resetArea (formName) {
      // this.$refs[formName].resetFields();
      this.$refs[formName].clearValidate();
      this.areaDialogVisible = false;
    },

新增名称不重复校验方法和编辑名称不重复校验方法

export function onlyVerify (arr, keyName, value) {
  // console.log(arr, 'arr', value, 'value');
  let isVerify = true;
  if (arr.length > 0) {
    arr.map((t) => {
      // console.log("t[keyName]:" + t[keyName], value, 'value');
      if (t[keyName] == value) {
        isVerify = false;
      }
    });
  }
  return isVerify;
}

export function onlyEditVerify (arr, keyName, value, eidtId) {
  let newArr = [];
  arr.forEach((element) => {
    // console.log(eidtId, 'eidtId', element.id, 'element.id');
    if (eidtId != element.id) {
      newArr.push(element);
    }
  });
  // console.log(newArr, 'newArr');
  return onlyVerify(newArr, keyName, value);
}