智慧农业后台管理页面
shuishen
2022-07-29 d6a0abe9024f87fc517a2b71df0f17c5cadc41a0
src/views/land/landAdd.vue
@@ -1,196 +1,192 @@
<template>
  <el-dialog
    :title="title"
    :modal-append-to-body="false"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="60%"
    :visible.sync="visible"
  >
    <avue-form ref="form" v-model="form" :option="option" @submit="submit">
      <!-- 地图插入 -->
      <template slot-scope="{ type, disabled }" slot="line">
        <getMapDataInThere
          ref="getMapData"
          id="getMapData"
          @setMapData="setMapData"
        ></getMapDataInThere>
      </template>
    </avue-form>
  </el-dialog>
    <el-dialog
        :title="title"
        :modal-append-to-body="false"
        :append-to-body="true"
        :close-on-click-modal="false"
        width="60%"
        :visible.sync="visible"
    >
        <avue-form ref="form" v-model="form" :option="option" @submit="submit">
            <!-- 地图插入 -->
            <template slot-scope="{ type, disabled }" slot="line">
                <getMapDataInThere ref="getMapData" id="getMapData" @setMapData="setMapData"></getMapDataInThere>
            </template>
        </avue-form>
    </el-dialog>
</template>
<script>
import {mapGetters} from "vuex";
import {getFarmList} from "@/api/farm/farm";
import {getDeptTree} from "@/api/system/dept";
import {add} from "@/api/land/land";
import website from '@/config/website';
import getMapDataInThere from "./getMapDataInThere.vue";
import { mapGetters } from "vuex"
import { getFarmList } from "@/api/farm/farm"
import { getDeptTree } from "@/api/system/dept"
import { add } from "@/api/land/land"
import website from '@/config/website'
import getMapDataInThere from "./getMapDataInThere.vue"
export default {
  components: {
    getMapDataInThere
  },
  data() {
    return {
      title: "新增地块",
      form: {},
      option: {
        emptyBtn: false,
        submitText: "保存",
        gutter: 30,
        column: [
          {
            label: "地块名称",
            prop: "landName",
            rules: [{
              required: true,
              message: "请输入地块名称",
              trigger: "blur"
            }]
          },
          {
            label: "所属农场",
            prop: "farmId",
            type: "tree",
            dicData: [],
            props: {
              label: "farmName",
              value:"id"
    components: {
        getMapDataInThere
    },
    data () {
        return {
            title: "新增地块",
            form: {},
            option: {
                emptyBtn: false,
                submitText: "保存",
                gutter: 30,
                column: [
                    {
                        label: "地块名称",
                        prop: "landName",
                        rules: [{
                            required: true,
                            message: "请输入地块名称",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "所属农场",
                        prop: "farmId",
                        type: "tree",
                        dicData: [],
                        props: {
                            label: "farmName",
                            value: "id"
                        },
                        slot: true,
                        rules: [{
                            required: true,
                            message: "请选择所属农场",
                            trigger: "click"
                        }]
                    },
                    {
                        label: "地块类型",
                        type: "select",
                        prop: "landType",
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=land",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        dataType: "number",
                        rules: [{
                            required: true,
                            message: "请选择地块类型",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "面积单位",
                        prop: "landUnit",
                        value: "0",
                        type: "select",
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=landunit",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        dataType: "number",
                        span: 6,
                    },
                    {
                        label: "地块展示",
                        labelWidth: "0",
                        prop: "line",
                        className: "mapClass",
                        span: 24,
                        formslot: true,
                    }
                ],
            },
            slot: true,
            rules: [{
              required: true,
              message: "请选择所属农场",
              trigger: "click"
            }]
          },
          {
            label: "地块类型",
            type: "select",
            prop: "landType",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=land",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            dataType: "number",
            rules: [{
              required: true,
              message: "请选择地块类型",
              trigger: "blur"
            }]
          },
          {
            label: "面积单位",
            prop: "landUnit",
            value: "0",
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=landunit",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            dataType: "number",
            span: 6,
          },
          {
            label: "地块展示",
            labelWidth: "0",
            prop: "line",
            className: "mapClass",
            span: 24,
            formslot: true,
          }
        ],
      },
      visible: false,
    };
  },
  computed: {
    ...mapGetters(["userInfo", "permission", "polygons"]),
  },
  mounted() {
    this.initData(this.userInfo.tenant_id);
  },
  methods: {
    initData(tenantId) {
      // getDeptTree(tenantId).then(res => {        console.log(res)
            visible: false,
        }
    },
    computed: {
        ...mapGetters(["userInfo", "permission", "polygons"]),
    },
    mounted () {
        this.initData(this.userInfo.tenant_id)
    },
    methods: {
        initData (tenantId) {
            // getDeptTree(tenantId).then(res => {        console.log(res)
      //   const column = this.findObject(this.option.column, "deptId");
      //   column.dicData = res.data.data;
      // });
      const data = {
          deptId:this.userInfo.dept_id
        }
      getFarmList(data).then(res => {
          const column = this.findObject(this.option.column, "farmId");
          column.dicData = res.data.data;
        });
            //   const column = this.findObject(this.option.column, "deptId");
            //   column.dicData = res.data.data;
            // });
            const data = {
                deptId: this.userInfo.dept_id
            }
            getFarmList(data).then(res => {
                const column = this.findObject(this.option.column, "farmId")
                column.dicData = res.data.data
            })
        },
        //初始化
        init () {
            //清空面的数据
            this.$store.commit('clear_polygon')
            //计算当前时间
            this.visible = true
        },
        // 表单提交
        submit (row, loading) {
            row['deptId'] = this.userInfo.dept_id
            var that = this
            if (this.polygons.length == 0) {
                //没有面的数据
                this.$refs.getMapData.isCheck = true
                loading()
            } else {
                //如果有值,空间坐标转换
                let pol = this.polygons
                let polLength = this.polygons.length - 1
                let usePolygons = ""
                for (let k in pol) {
                    usePolygons += pol[k].lng + "," + pol[k].lat
                    if (k != polLength) {
                        usePolygons += ";"
                    }
                }
                //设置坐标点
                row.userId = this.userInfo.user_id
                row.landRange = usePolygons
            }
            add(row).then(() => {
                that.$emit("refreshOnLoad")
                that.$refs.form.resetFields()
                that.visible = false
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                done()
            }, error => {
                loading()
                window.console.log(error)
            })
        },
        setMapData (val) {
            this.LineData = val[0]
            this.PointData = val[1]
        },
    },
    //初始化
    init() {
      //清空面的数据
      this.$store.commit('clear_polygon');
      //计算当前时间
      this.visible = true;
    },
    // 表单提交
    submit(row, loading) {
      row['deptId'] = this.userInfo.dept_id;
      var that = this;
      if (this.polygons.length == 0) {
        //没有面的数据
        this.$refs.getMapData.isCheck = true;
        loading();
      } else {
        //如果有值,空间坐标转换
        let pol = this.polygons;
        let polLength = this.polygons.length - 1;
        let usePolygons = "";
        for (let k in pol) {
          usePolygons += pol[k].lng + "," + pol[k].lat;
          if (k != polLength) {
            usePolygons += ";";
          }
        }
        //设置坐标点
        row.userId = this.userInfo.user_id;
        row.landRange = usePolygons;
      }
      add(row).then(() => {
        that.$emit("refreshOnLoad");
        that.$refs.form.resetFields();
        that.visible = false;
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        window.console.log(error);
      });
    },
    setMapData(val) {
      this.LineData = val[0];
      this.PointData = val[1];
    },
  },
};
</script>
<style lang="scss" scoped>
.mapClass div label {
  display: none;
    display: none;
}
#getMapData {
  width: 90%;
  position: relative;
  height: 400px;
  top: 10px;
  left: 90px;
    width: 90%;
    position: relative;
    height: 400px;
    top: 10px;
    left: 90px;
}
</style>