|
|
@@ -2,9 +2,9 @@
|
|
|
<div class='m-container'>
|
|
|
<h2>分部教学点</h2>
|
|
|
<div class="m-core">
|
|
|
- <div class='newBand'>新建</div>
|
|
|
+ <div @click="teachingStatus = true" class='newBand'>新建</div>
|
|
|
<!-- 搜索类型 -->
|
|
|
- <el-form :inline="true"
|
|
|
+ <!-- <el-form :inline="true"
|
|
|
class="searchForm"
|
|
|
v-model="searchForm">
|
|
|
<el-form-item>
|
|
|
@@ -18,21 +18,21 @@
|
|
|
<el-input suffix-icon="el-icon-search"
|
|
|
placeholder="请输入搜索内容"></el-input>
|
|
|
</el-form-item>
|
|
|
- </el-form>
|
|
|
+ </el-form> -->
|
|
|
<!-- 查询列表 -->
|
|
|
- <div class="searchWrap">
|
|
|
+ <!-- <div class="searchWrap">
|
|
|
<p>查询条件:</p>
|
|
|
<div class="searchItem"
|
|
|
@click="closeSearch(item)"
|
|
|
- v-for="(item,index) in searchLsit">
|
|
|
+ v-for="(item,index) in searchLsit" :key="index">
|
|
|
{{ item.key }}
|
|
|
<i class="el-icon-close"></i>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<!-- 列表 -->
|
|
|
<div class="tableWrap">
|
|
|
<el-table :data='tableList'>
|
|
|
- <el-table-column align='center'
|
|
|
+ <el-table-column align='center' width="55"
|
|
|
label="编号">
|
|
|
</el-table-column>
|
|
|
<el-table-column align='center'
|
|
|
@@ -54,41 +54,223 @@
|
|
|
label="操作">
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
- <pagination :total="rules.total"
|
|
|
- :page.sync="rules.page"
|
|
|
- :limit.sync="rules.limit"
|
|
|
- :page-sizes="rules.page_size"
|
|
|
+ <pagination :total="pageInfo.total"
|
|
|
+ :page.sync="pageInfo.page"
|
|
|
+ :limit.sync="pageInfo.limit"
|
|
|
+ :page-sizes="pageInfo.page_size"
|
|
|
@pagination="getList" />
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+
|
|
|
+ <el-dialog title="添加教学点" :visible.sync="teachingStatus" width="500px">
|
|
|
+ <el-form :model="form" :rules="rules" ref="ruleForm">
|
|
|
+ <el-form-item label="教学点名称" prop="name" :label-width="formLabelWidth">
|
|
|
+ <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="教学点来源" prop="source" :label-width="formLabelWidth">
|
|
|
+ <el-select v-model="form.source">
|
|
|
+ <el-option label="合作单位" value="1"></el-option>
|
|
|
+ <el-option label="租赁" value="2"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="form.source == 1" prop="company" label="合作单位" :label-width="formLabelWidth">
|
|
|
+ <el-select v-model="form.company">
|
|
|
+ <el-option label="合作单位" value="1"></el-option>
|
|
|
+ <el-option label="租赁" value="2"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="form.source == 2" prop="fee" label="费用" :label-width="formLabelWidth">
|
|
|
+ <el-input v-model="form.fee" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="form.source == 2" prop="address" :show-message="addressMessage" label="上课地点" :label-width="formLabelWidth">
|
|
|
+ <el-input class="text-address" v-model="form.address" :disabled="true">
|
|
|
+ <el-button slot="append" @click="addMap" type="primary" icon="el-icon-plus">选择</el-button>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="onTeachingCancel('ruleForm')">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="onTeachingSubmit('ruleForm')">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog title="选择地图" custom-class="map-container" :visible.sync="mapStatus" width="800px">
|
|
|
+ <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
|
|
|
+ <el-amap :zoom="zoom" :plugin="plugin" :center="center">
|
|
|
+ <el-amap-marker :events="markerEvents()" v-for="(marker, index) in markers" :key="index" :position="marker" ></el-amap-marker>
|
|
|
+ </el-amap>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import pagination from '@/components/Pagination/index'
|
|
|
+// 地图
|
|
|
+(function () {
|
|
|
+let func = EventTarget.prototype.addEventListener;
|
|
|
+let supportsPassive = false
|
|
|
+try {
|
|
|
+ let opts = Object.defineProperty({}, 'passive', {
|
|
|
+ get: function() {
|
|
|
+ supportsPassive = true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ document.addEventListener("testPassive", null, opts);
|
|
|
+ document.removeEventListener('testPassive', null, opts);
|
|
|
+} catch(e) {}
|
|
|
+
|
|
|
+EventTarget.prototype.addEventListener = function (type, fn, capture) {
|
|
|
+ this.func = func;
|
|
|
+ capture = capture instanceof Object ? capture : {};
|
|
|
+ capture.passive = supportsPassive;
|
|
|
+ this.func(type, fn, capture);
|
|
|
+};
|
|
|
+}());
|
|
|
export default {
|
|
|
components: { pagination },
|
|
|
name: 'adminManager',
|
|
|
data () {
|
|
|
+ let self = this
|
|
|
return {
|
|
|
searchForm: {
|
|
|
status: ''
|
|
|
},
|
|
|
searchLsit: [],
|
|
|
tableList: [],
|
|
|
- rules: {
|
|
|
+ pageInfo: {
|
|
|
// 分页规则
|
|
|
limit: 10, // 限制显示条数
|
|
|
page: 1, // 当前页
|
|
|
total: 0, // 总条数
|
|
|
page_size: [10, 20, 40, 50] // 选择限制显示条数
|
|
|
},
|
|
|
+ teachingStatus: false, // 添加教学点
|
|
|
+ formLabelWidth: '100px',
|
|
|
+ addressDetail: {},
|
|
|
+ form: {
|
|
|
+ name: null, // 教学点名称
|
|
|
+ source: null, // 来源
|
|
|
+ fee: null, // 费用
|
|
|
+ address: null, // 上课地点
|
|
|
+ company: null, // 合作单位
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [{ required: true, message: '请输入教学点名称', trigger: 'blur' }],
|
|
|
+ source: [{required: true, message: '请选择教学点来源', trigger: 'change'}],
|
|
|
+ fee: [{ required: true, message: '请输入教学点名称', trigger: 'blur'}],
|
|
|
+ address: [{required: true, message: '请选择上课地点', trigger: 'blur'}],
|
|
|
+ company: [{required: true, message: '请选择合作单位', trigger: 'change'}]
|
|
|
+ },
|
|
|
+ addressMessage: true,
|
|
|
+ mapStatus: false,
|
|
|
+ zoom: 16,
|
|
|
+ center: [114.34371, 30.55939],
|
|
|
+ markers: [],
|
|
|
+ plugin: [],
|
|
|
+ searchOption: {
|
|
|
+ city: '',
|
|
|
+ citylimit: true,
|
|
|
+ pageSize: 1, // 单页显示结果条数
|
|
|
+ pageIndex: 1, // 页码
|
|
|
+ autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ onTeachingSubmit(formName) { // 添加数据
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ alert('submit!');
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onTeachingCancel(formName) {
|
|
|
+ this.teachingStatus = false
|
|
|
+ this.$refs[formName].clearValidate()
|
|
|
+ },
|
|
|
+ addMap() { //
|
|
|
+ this.mapStatus = true
|
|
|
+ let poi = this.addressDetail
|
|
|
+ // 获取经纬度
|
|
|
+ if(poi.lnglat) {
|
|
|
+ this.markers = []
|
|
|
+ this.center = [poi.lnglat.lng, poi.lnglat.lat];
|
|
|
+ this.markers.push([poi.lnglat.lng, poi.lnglat.lat])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onSearchResult(pois) { // 搜索出来的Marker
|
|
|
+ let latSum = 0
|
|
|
+ let lngSum = 0
|
|
|
+ if (pois.length > 0) {
|
|
|
+ pois.forEach(poi => {
|
|
|
+ let {lng, lat} = poi;
|
|
|
+ lngSum += lng;
|
|
|
+ latSum += lat;
|
|
|
+ this.markers.push([poi.lng, poi.lat]);
|
|
|
+ });
|
|
|
+ let center = {
|
|
|
+ lng: lngSum / pois.length,
|
|
|
+ lat: latSum / pois.length
|
|
|
+ };
|
|
|
+ this.center = [center.lng, center.lat];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ markerEvents() { // marker 事件添加
|
|
|
+ let that = this
|
|
|
+ return {
|
|
|
+ click: (e) => {
|
|
|
+ let geocoder = new AMap.Geocoder()
|
|
|
+ geocoder.getAddress(e.lnglat, function(status, result) {
|
|
|
+ if(status === 'complete' && result.regeocode) {
|
|
|
+ result.regeocode.lnglat = e.lnglat
|
|
|
+ that.addressDetail = result.regeocode
|
|
|
+ that.form.address = result.regeocode.formattedAddress
|
|
|
+ that.mapStatus = false
|
|
|
+ that.addressMessage = false
|
|
|
+ } else {
|
|
|
+ that.$message.error('请重新选择地址')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
getList () { }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
+.el-select {
|
|
|
+ width: auto !important;
|
|
|
+}
|
|
|
+.el-vue-amap-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 50vh !important;
|
|
|
+}
|
|
|
+* {
|
|
|
+ // touch-action: pan-y;
|
|
|
+ touch-action: none;
|
|
|
+}
|
|
|
+.map-container {
|
|
|
+ .el-dialog__body {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-input-group__append, .el-button--primary {
|
|
|
+ background: #14928a;
|
|
|
+ border-color: #14928a;
|
|
|
+ color: #fff;
|
|
|
+ &:hover, &:active {
|
|
|
+ background: #14928a;
|
|
|
+ border-color: #14928a;
|
|
|
+ color: #FFF;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-vue-search-box-container {
|
|
|
+ position: absolute !important;
|
|
|
+ left: 10px;
|
|
|
+ margin-top: 10px;
|
|
|
+ z-index: 99999 !important;
|
|
|
+}
|
|
|
+
|
|
|
</style>
|
