xjsaas-ui/src/views/xj/document/maintenance-notice/components/edit-dialog.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-11-20 11:58:33
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-11-26 15:49:28
 * @FilePath: \znxjxt-ui\src\views\xj\document\maintenance-notice\components\edit-dialog.vue
 * @Description: 养护通知单编辑弹窗
-->
<template>
  <div class="edit-dialog">
    <el-form
      class="editForm"
      ref="editForm"
      :model="editForm"
      :rules="rules"
      label-width="7rem"
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="道路名称:" prop="segmentId">
            <el-select
              disabled
              v-model="editForm.segmentId"
              placeholder="请选择路段"
              clearable
            >
              <el-option
                v-for="item in segmentList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="开始桩号:" prop="stakeStart">
            <el-input
              disabled
              v-model="editForm.stakeStart"
              placeholder="请输入开始桩号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束桩号:" prop="stakeEnd">
            <el-input
              disabled
              v-model="editForm.stakeEnd"
              placeholder="请输入结束桩号"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="养护负责人:" prop="projectLeader">
            <el-input
              clearable
              v-model="editForm.projectLeader"
              placeholder="请输入负责人名称"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-form-item label="养护内容:" prop="content">
          <fssm-scroll style="max-height: 10rem">
            <div
              class="content-box"
              v-for="(item, index) in editForm.content"
              :key="`content-box-${index}`"
            >
              <el-col :span="21">
                <el-input
                  type="textarea"
                  resize="none"
                  placeholder="请输入养护内容"
                  v-model="editForm.content[index]"
                />
              </el-col>
              <el-col :span="2">
                <span
                  v-if="index < 1"
                  class="el-icon-circle-plus-outline"
                  @click="handleAddContent"
                ></span>
                <span
                  v-else
                  class="el-icon-delete"
                  @click="handleDeleteContent(index)"
                ></span>
              </el-col>
            </div>
          </fssm-scroll>
        </el-form-item>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
export default {
  name: "EditDialog",
  components: { FssmScroll },
  data() {
    return {
      // 编辑表单
      editForm: {
        // 道路名称
        segmentId: "",
        // 开始桩号
        stakeStart: "",
        // 结束桩号
        stakeEnd: "",
        // 养护单位项目负责人
        projectLeader: "",
        // 养护内容
        content: ["asdadasda", "asdasfddd"],
      },
      // 路段列表
      segmentList: [],
      // 表单验证规则
      rules: {
        projectLeader: [
          { required: true, message: "请输入负责人名称", trigger: "blur" },
        ],
        content: [
          {
            type: "array",
            required: true,
            defaultField: {
              type: "string",
              required: true,
              message: "请完整填写内容",
            },
          },
        ],
      },
    };
  },
  methods: {
    /**
     * @description: 添加养护内容
     */
    handleAddContent() {
      this.editForm.content.push("");
    },

    /**
     * @description: 删除养护内容
     */
    handleDeleteContent(index) {
      this.editForm.content.splice(index, 1);
    },

    /**
     * @description: 取消
     */
    cancel() {
      this.$emit("cancel");
    },

    /**
     * @description: 提交表单
     */
    submitForm() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          console.log(this.editForm);
          this.$emit("cancel");
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.edit-dialog {
  width: 100%;
  height: 100%;
}

.editForm {
  .el-select {
    width: 100%;
  }

  .content-box {
    display: flex;

    span {
      font-size: 1.5rem;
      line-height: 3rem;
    }

    .el-icon-circle-plus-outline {
      color: #08ce29;
    }

    .el-icon-delete {
      color: #f01515;
    }

    > div {
      margin: 0.5rem 0;
    }
  }
}

/* 页脚 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>