ly-front/src/views/menuData/PositionDialog.vue

<template>
  <div class="position">
    <div class="demo-formName">
      <my-form
        :formNewList="formList"
        :fromItem="formItem"
        @headdenForm="headdenForm"
        searchTree
        ref="myForm"
      >
      </my-form>
    </div>
    <div class="count">
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="headdenForm({ page: 1, pageSize: 10 }, 'search')"
      >
        查询
      </el-button>
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="headdenForm({}, 'add')"
      >
        新增
      </el-button>
    </div>
    <div class="table-container">
      <my-table
        :tableData="tableData"
        :coloumData="coloumData"
        isShowPagination
        :paginationParam="paginationParam"
        @changeSize="handleSizeChange"
        @changePage="handlePageChange"
        @selectionChange="handleSelectionChange"
      >
        <template #img="{ data }">
          <img
            :src="data.img !== null ? url + data.img : defaultImg"
            style="object-fit: contain"
            alt=""
          />
        </template>
        <template #operate="{ data }">
          <el-link
            type="primary"
            :underline="false"
            @click="handleClick(data, 'edit')"
          >
            修改
          </el-link>
          <el-link
            type="danger"
            :underline="false"
            @click="handleClick(data, 'delete')"
          >
            删除
          </el-link>
        </template>
      </my-table>
    </div>
    <el-drawer
      :title="title"
      :visible.sync="drawer"
      append-to-body
      direction="rtl"
      :wrapperClosable="false"
      :close-on-press-escape="false"
    >
      <div class="demo-drawer__content">
        <my-form
          :formNewList="formDrawerList"
          :fromItem="fromItem"
          dialogImageUrl
          @determine="determine"
          @handleClose="handleClose"
          labelWidth="120px"
          :disabled="isEditFlag"
        >
        </my-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
"use script";
import {
  devPositionList,
  devPositionAdd,
  devPositionUpdate,
  devPositionDelete
} from "@/api/position.js";
// import { deviceList } from "@/api/device/index.js";
// import { chinaRegion } from "@/api/home.js";
export default {
  name: "Position-dialog",
  data() {
    return {
      url: process.env.VUE_APP_API_URL,
      baseUrl: "",
      defaultImg: require("@/assets/img/nopic.png"),
      formList: [
        {
          label: "防区名称",
          type: "input",
          model: "Name"
        }
      ],
      formItem: {},
      formDrawerList: [
        {
          label: "名称",
          type: "input",
          model: "name",
          rules: [{ required: true, message: "请输入名称" }]
        },
        {
          label: "地址",
          type: "input",
          model: "address"
        },
        {
          label: "防区",
          type: "marsMapmap",
          model: "polygon"
        },
        {
          label: "联系人",
          type: "input",
          model: "contactName"
        },
        {
          label: "联系人电话",
          type: "input",
          model: "contactTel"
        },
        {
          label: "防区图片",
          type: "img",
          model: "img"
        },
        {
          label: "备注",
          type: "textarea",
          maxLenght: 100,
          rowsHeight: 15,
          placeholder: "请输入内容",
          model: "remarks"
        }
      ],
      tableData: [],
      coloumData: [
        // {
        //   slot: "img",
        //   label: "防区图片"
        // },
        {
          type: "text",
          label: "防区名称",
          prop: "name"
        },
        {
          type: "text",
          label: "地址",
          prop: "address"
        },
        {
          type: "text",
          label: "创建时间",
          prop: "createTime"
        },
        {
          slot: "operate",
          label: "操作",
          width: 250
        }
      ],
      paginationParam: {
        currentPage: 1,
        size: 10,
        total: 0
      },
      drawer: false,
      title: "",
      fromItem: {},
      isType: "",
      isEditFlag: false
    };
  },
  components: {},
  mounted() {
    let wPath = window.document.location.href;
    let pathName = this.$route.path;
    let pos = wPath.indexOf(pathName);
    let localhostPath = wPath.substring(0, pos);

    this.baseUrl =
      process.env.VUE_APP_API_URL === "/"
        ? localhostPath
        : process.env.VUE_APP_API_URL;

    this.headdenForm({}, "search");
  },
  methods: {
    getStatusStyle(value) {
      return {
        color: value == 0 ? "green" : "red"
      };
    },
    // 关闭抽屉
    handleClose() {
      this.drawer = false;
    },
    // 确定按钮
    determine(value) {
      let params = {};
      params = value;
      console.log(params, "params");
      params.regionJson = JSON.stringify(params.geoJson);

      params.lon = params.center[0];
      params.lat = params.center[1];
      this.$delete(params, "geoJson");
      this.$delete(params, "center");
      // this.$delete(params, "imageBriefUrl");
      if (params.lon !== "" && params.lat !== "") {
        if (this.isType === "add") {
          //   console.log("新增");
          devPositionAdd(params)
            .then((res) => {
              if (res.code === 0) {
                this.$message.success("新增成功");
                this.headdenForm({}, "search");
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else if (this.isType === "edit") {
          devPositionUpdate(params).then((res) => {
            if (res.code === 0) {
              this.$message.success("编辑成功");
              this.headdenForm({}, "search");
            }
          });
        }
        this.drawer = false;
      } else {
        this.$message.error("请选择地图上的经纬度");
      }
    },
    // 新增 搜索
    headdenForm(value, type) {
      let params = {};

      if (type === "add") {
        this.isType = "add";
        this.title = "新增防区";
        this.fromItem = {};
        this.isEditFlag = false;
        this.drawer = true;
      } else if (type === "search") {
        params = JSON.parse(JSON.stringify(this.$refs.myForm.ruleForm));
        console.log(params, this.paginationParam);

        params.pageNum = this.paginationParam.currentPage;
        params.pageSize = this.paginationParam.size;
        devPositionList(params).then((res) => {
          if (res.code === 0) {
            this.tableData = res.data.items;
            this.paginationParam.total = res.data.totalCount;
          }
        });
      } else if (type === "reset") {
        this.formItem = {};
      }
      console.log(value);
    },
    // 编辑 删除
    handleClick(value, type) {
      if (type === "edit") {
        this.isType = "edit";
        this.title = "编辑防区";
        this.isEditFlag = false;
        this.fromItem = value;
        this.drawer = true;
      } else if (type === "delete") {
        console.log(value);
        let params = {
          id: value.id
        };
        this.$confirm("此操作将永久删除该防区, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            devPositionDelete(params).then((res) => {
              if (res.code === 0) {
                this.$message.success("删除成功");
                this.headdenForm({}, "search");
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },
    handleSizeChange(value) {
      console.log(value);
      this.paginationParam.size = value;
      this.headdenForm();
    },
    handlePageChange(value) {
      console.log(value);
      this.paginationParam.currentPage = value;
      this.headdenForm();
    },
    handleSelectionChange(value) {
      console.log(value);
    }
  }
};
</script>
<style scoped lang="scss">
.position {
  width: 95%;
  height: 100%;
  padding: 20px;
  position: relative;
}
</style>