| | |
| | | <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> |