2023.10.31

riku

2023-10-31 2d3d56ff801b73afdb779267004d740f9beafe57

 src/views/overlay-grid/components/GridEditing.vue

@@ -1,18 +1,53 @@
<template>
  <div>当前操作网格: {{ selectedGrid.gName }}</div>
  <div>网格编号：{{ selectedGrid.gId }}</div>
  <div>网格顶点：</div>
  <div v-for="(item, index) in selectedGrid.gSide" :key="index">
    {{ item }}
  </div>
  <div class="btn-group">
    <el-button @click="startOrCompleteEdit">{{
      isEdit ? '保存编辑' : '开始编辑'
    }}</el-button>
    <el-button :disabled="!isEdit" @click="cancelEdit"
      >取消编辑</el-button
    >
  </div>
  <CloseButton @close="closeEdit">
    <div class="fy-card">
      <div class="fy-h2">正在编辑网格</div>
      <div class="fy-main">
        <el-form
          label-position="left"
          :rules="rules"
          :model="selectedGrid"
          ref="formRef"
        >
          <!-- <el-form-item label="编号" prop="id">
          <div>{{ selectedGrid.id }}</div>
        </el-form-item> -->
          <el-form-item label="名称" prop="name">
            <el-input
              v-model="selectedGrid.name"
              placeholder="请输入网格名称"
              clearable
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="顶点" prop="sides">
            <el-scrollbar height="100px" class="fy-main-border">
              <div
                class="list-wrapper"
                v-for="(item, index) in selectedGrid.sides"
                :key="index"
              >
                {{ `${index + 1}. ${item}` }}
              </div>
            </el-scrollbar>
          </el-form-item>
        </el-form>
        <div class="btn-group">
          <el-button
            @click="startOrCompleteEdit"
            :loading="loading"
            >{{ isEdit ? '保存编辑' : '开始编辑' }}</el-button
          >
          <el-button
            type="danger"
            :disabled="!isEdit"
            @click="cancelEdit"
            >取消编辑</el-button
          >
        </div>
      </div>
    </div>
  </CloseButton>
</template>

<script>
@@ -30,7 +65,8 @@
  },
  data() {
    return {
      editing: false
      editing: false,
      loading: false
    };
  },
  computed: {
@@ -41,13 +77,18 @@
      'openGridEdit',
      'closeGridEdit',
      'saveSelectedGrid',
      'quitSelectedGrid'
      'quitSelectedGrid',
      'clearSelect'
    ]),
    // 开始或完成保存编辑网格多边形
    startOrCompleteEdit() {
      if (this.isEdit) {
        this.saveSelectedGrid();
        this.closeGridEdit();
        this.loading = true;
        this.saveSelectedGrid()
          .then(() => {
            this.closeGridEdit();
          })
          .finally(() => (this.loading = false));
      } else {
        this.openGridEdit();
      }
@@ -56,12 +97,27 @@
    cancelEdit() {
      this.quitSelectedGrid();
      this.closeGridEdit();
    },
    // 关闭编辑界面
    closeEdit() {
      this.cancelEdit();
      this.clearSelect();
    }
  }
};
</script>
<style scoped>
.wrapper {
  /* position: relative;
  background: antiquewhite;
  padding-right: 10px; */
}
.btn-group {
  display: flex;
}
</style>

.list-wrapper {
  width: 100%;
  /* background-color: var(--el-bg-color-page); */
}
</style>