xjsaas-ui/src/views/xj/route/route-terminal/components/terminal-add.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-17 11:01:18
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-10-17 11:24:08
 * @FilePath: \znxjxt-ui\src\views\xj\route\route-terminal\components\terminal-add.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="add-content">
    <div class="add-form">
      <el-form
        ref="dialogForm"
        :model="dialogForm"
        :rules="rules"
        label-width="120px"
      >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="设备编号" prop="clientid">
              <el-input
                v-model="dialogForm.clientid"
                placeholder="请输入设备编号"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属车辆" prop="plateno">
                <el-input
                v-model="dialogForm.plateno"
                placeholder="请输入所属车辆"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="作业范围" prop="areas">
              <el-select
                v-model="dialogForm.areas"
                placeholder="请选择作业范围"
                multiple
                collapse-tags
              >
                <el-option
                  v-for="dict in bindCarList"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                v-model="dialogForm.remark"
                rows="3"
                resize="none"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="bottom-map">
      <fssm-map
        @endEoordinate="geteoordinate"
        :editCoordinates="editCoordinates"
        :showChange="true"
        :showZoom="false"
        :showDraw="false"
      ></fssm-map>
    </div>
    <div class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { addTerminal, updateTerminal } from "@/api/xj/terminal";
import FssmMap from "@/components/map/fssm-map";
export default {
  components: { FssmMap },
  name: "TerminalAdd",
  props: {
    dialogItem: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      // 表单绑定
      dialogForm: {
        clientid: "",
        plateno: "",
        areas: [],
        remark: "",
      },
      rules: {
        clientid: [
          { required: true, message: "设备编号不能为空", trigger: "blur" },
        ],
        plateno: [
          { required: true, message: "所属车辆不能为空", trigger: "blur" },
        ],
        areas: [
          { required: true, message: "请选择作业范围", trigger: "change" },
        ],
        coordinates: [
          {
            required: true,
            message: "请在下方地图添加作业范围",
            trigger: "blur",
          },
        ],
      },
      // 根据id查询到的区域坐标
      editCoordinates: [],
    };
  },
  watch: {
    dialogItem: {
      handler(val) {
        if (val.title === "修改") {
          const a =
            "122.2772084092066,42.1903654574782;122.4566518803403,41.91936930784885;123.0608999272153,41.9541594027907;122.9638539170191,42.419247153717315;122.37425425176474,42.413753989654815;122.36143698071095,42.24529693046514;122.2772084092066,42.1903654574782";
          this.dialogForm.coordinates = a;
          this.editCoordinates = a.split(";").map((item) => {
            return item.split(",");
          });
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  methods: {
    /* 获取多边形坐标方法 */
    geteoordinate(list) {
      this.dialogForm.coordinates = list.join(";");
    },
    /* 点击取消事件 */
    cancel() {
      this.$emit("addCancel");
    },
    /* 点击确认事件 */
    submitForm() {
      this.$refs["dialogForm"].validate((valid) => {
        if (valid) {
          if (this.dialogItem.title === "修改") {
            updateTerminal(this.dialogForm).then(({ data, code }) => {
              if (code === 200) {
                this.$emit("addCancel");
              }
            });
          } else {
            addTerminal(this.dialogForm).then(({ data, code }) => {
              if (code === 200) {
                this.$emit("addCancel");
              }
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.add-content {
  width: 100%;
  height: 100%;

  .add-form {
    .el-select {
      width: 100%;
    }
  }

  .bottom-map {
    width: 100%;
    height: 30rem;
  }

  .dialog-footer {
    width: 100%;
    height: 2.5rem;
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
  }
}
</style>