|
|
@@ -1,471 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="app-container">
|
|
|
- <div class="filter-container">
|
|
|
- <div class="filter-left">
|
|
|
- <div class="filter-item">
|
|
|
- 路线名称:
|
|
|
- <el-input
|
|
|
- v-model="input"
|
|
|
- placeholder=""
|
|
|
- style="width: 150px"
|
|
|
- ></el-input>
|
|
|
- </div>
|
|
|
- <div class="filter-item">
|
|
|
- 所属项目/建筑:
|
|
|
- <el-select v-model="value" placeholder="" style="width: 150px">
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
-
|
|
|
- <el-button type="primary" icon="el-icon-search" class="search-button"
|
|
|
- >搜索</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="handle-button-right">
|
|
|
- <el-button
|
|
|
- icon="el-icon-plus"
|
|
|
- type="success"
|
|
|
- @click="dialogAddVisible = true"
|
|
|
- >新增</el-button
|
|
|
- >
|
|
|
- <el-button icon="el-icon-delete" type="danger" @click="batchDelete"
|
|
|
- >删除</el-button
|
|
|
- >
|
|
|
- <el-button type="warning">
|
|
|
- <svg-icon icon-class="export" />
|
|
|
- 导出
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <el-divider></el-divider>
|
|
|
- <el-table
|
|
|
- :data="tableData"
|
|
|
- stripe
|
|
|
- border
|
|
|
- :header-cell-style="{ background: '#EBF1FF', color: '#606266' }"
|
|
|
- style="width: 100%"
|
|
|
- id="out-table"
|
|
|
- @selection-change="handleSelectionChange"
|
|
|
- >
|
|
|
- <el-table-column type="selection" width="40"> </el-table-column>
|
|
|
-
|
|
|
- <el-table-column prop="routeName" label="路线名称"> </el-table-column>
|
|
|
- <el-table-column prop="ownerBuilding" label="所属项目/建筑" width="230">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="point" label="对应点位">
|
|
|
- <template slot-scope="{ row }">
|
|
|
- <div class="check" @click="dialogPointVisible = true">
|
|
|
- {{ row.point }}
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <el-table-column prop="newTime" label="最新改动时间" width="230" sortable>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="routeDetail" label="路线详情">
|
|
|
- <template slot-scope="{ row }">
|
|
|
- <div class="check" @click="dialogRouteDetailVisible = true">
|
|
|
- {{ row.point }}
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <el-table-column label="操作" width="150" fixed="right">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button
|
|
|
- icon="el-icon-edit"
|
|
|
- style="color: #406ce5"
|
|
|
- @click="handleEdit(scope.$index, scope.row)"
|
|
|
- >编辑</el-button
|
|
|
- >
|
|
|
- <el-button
|
|
|
- icon="el-icon-delete"
|
|
|
- style="color: #f27979"
|
|
|
- @click="handleDelete(scope.$index, scope.row)"
|
|
|
- >删除</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
-
|
|
|
- <el-pagination background layout="prev, pager, next" :total="1000">
|
|
|
- </el-pagination>
|
|
|
-
|
|
|
- <!-- 点位弹框 start -->
|
|
|
- <el-dialog
|
|
|
- title="对应点位"
|
|
|
- :visible.sync="dialogPointVisible"
|
|
|
- >
|
|
|
- <el-form :model="form">
|
|
|
- <el-table
|
|
|
- :data="tableDataPoint"
|
|
|
- stripe
|
|
|
- border
|
|
|
- :header-cell-style="{ background: '#EBF1FF', color: '#606266' }"
|
|
|
- style="width: 100%"
|
|
|
- id="out-table"
|
|
|
- @selection-change="handleSelectionChange"
|
|
|
- >
|
|
|
- <el-table-column prop="order" label="序号" width="50">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="pointName" label="点位名称"> </el-table-column>
|
|
|
- <el-table-column prop="pointAddress" label="点位地址">
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </el-form>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button
|
|
|
- @click="dialogPointVisible = false"
|
|
|
- style="background: #f6f6f6"
|
|
|
- >关 闭</el-button
|
|
|
- >
|
|
|
- <el-button type="primary" @click="dialogPointVisible = false"
|
|
|
- >保 存</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- <!-- 点位弹框 end -->
|
|
|
-
|
|
|
- <!-- 路线详情弹框 start -->
|
|
|
- <el-dialog
|
|
|
- title="路线详情"
|
|
|
- :visible.sync="dialogRouteDetailVisible"
|
|
|
-
|
|
|
- class="routeDialog"
|
|
|
- >
|
|
|
- <div style="text-align: center">
|
|
|
- <img src="@/assets/route.png" alt="" width="100%" />
|
|
|
- <p style="margin: 20px auto">虹泾总部园巡检路线1</p>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- <!-- 路线详情弹框 end -->
|
|
|
-
|
|
|
- <!-- 新增弹框 start -->
|
|
|
- <el-dialog title="新增" :visible.sync="dialogAddVisible" class="routeDialogVisible">
|
|
|
- <el-form :model="form">
|
|
|
- <el-form-item label="路线名称:" :label-width="formLabelWidth">
|
|
|
- <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="所属项目/建筑:" :label-width="formLabelWidth">
|
|
|
- <el-select v-model="form.region" placeholder="" style="width: 100%">
|
|
|
- <el-option label="建筑一" value="1"></el-option>
|
|
|
- <el-option label="建筑二" value="2"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="上传图片:" :label-width="formLabelWidth">
|
|
|
- <el-upload
|
|
|
- class="upload-demo"
|
|
|
- action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
- :on-preview="handlePreview"
|
|
|
- :on-remove="handleRemove"
|
|
|
- :before-remove="beforeRemove"
|
|
|
- multiple
|
|
|
- :limit="3"
|
|
|
- :on-exceed="handleExceed"
|
|
|
- :file-list="fileList"
|
|
|
- >
|
|
|
- <el-button size="small">点击上传</el-button>
|
|
|
- <div slot="tip" class="el-upload__tip">
|
|
|
- 只能上传jpg/png文件，且不超过500kb
|
|
|
- </div>
|
|
|
- </el-upload>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="备注:" :label-width="formLabelWidth">
|
|
|
- <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <div class="table-tit">选择巡检点</div>
|
|
|
-
|
|
|
- <div class="filter-container">
|
|
|
- <div class="filter-left">
|
|
|
- <div class="filter-item">
|
|
|
- 点位名称:
|
|
|
- <el-input
|
|
|
- v-model="input"
|
|
|
- placeholder=""
|
|
|
- style="width: 150px"
|
|
|
- ></el-input>
|
|
|
- </div>
|
|
|
- <div class="filter-item">
|
|
|
- 点位地址:
|
|
|
- <el-input
|
|
|
- v-model="input"
|
|
|
- placeholder=""
|
|
|
- style="width: 150px"
|
|
|
- ></el-input>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <el-table
|
|
|
- :data="addTableData"
|
|
|
- stripe
|
|
|
- border
|
|
|
- :header-cell-style="{ background: '#eee', color: '#606266' }"
|
|
|
- style="width: 100%"
|
|
|
- id="out-table"
|
|
|
- @selection-change="handleSelectionChange"
|
|
|
- >
|
|
|
- <el-table-column type="selection" width="40"> </el-table-column>
|
|
|
- <el-table-column prop="order" label="序号" width="50">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="pointName" label="点位名称"> </el-table-column>
|
|
|
- <el-table-column prop="pointAddress" label="点位地址">
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </el-form>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="dialogAddVisible = false" style="background: #f6f6f6"
|
|
|
- >取 消</el-button
|
|
|
- >
|
|
|
- <el-button type="primary" @click="dialogAddVisible = false"
|
|
|
- >保 存</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- <!-- 新增弹框 end -->
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-
|
|
|
-<script>
|
|
|
-// 引入导出Excel表格依赖
|
|
|
-import FileSaver from "file-saver";
|
|
|
-import XLSX from "xlsx";
|
|
|
-
|
|
|
-export default {
|
|
|
- name: "javascriptthree",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- tableData: [
|
|
|
- {
|
|
|
- routeName: "虹泾巡检路线1",
|
|
|
- ownerBuilding: "徐乐路208号虹泾总部园",
|
|
|
- point: "查看",
|
|
|
- newTime: "2020-09-15 12:20:17",
|
|
|
- routeDetail: "查看",
|
|
|
- },
|
|
|
- {
|
|
|
- routeName: "虹泾巡检路线2",
|
|
|
- ownerBuilding: "徐乐路208号虹泾总部园",
|
|
|
- point: "查看",
|
|
|
- newTime: "2020-09-15 12:20:12",
|
|
|
- routeDetail: "查看",
|
|
|
- },
|
|
|
- {
|
|
|
- routeName: "虹泾巡检路线3",
|
|
|
- ownerBuilding: "徐乐路208号虹泾总部园",
|
|
|
- point: "查看",
|
|
|
- newTime: "2020-09-15 12:20:12",
|
|
|
- routeDetail: "查看",
|
|
|
- },
|
|
|
- ],
|
|
|
-
|
|
|
- addTableData: [
|
|
|
- {
|
|
|
- order: "1",
|
|
|
- pointName: "点位121212121",
|
|
|
- pointAddress: "青浦区徐泾镇徐乐路208号1楼",
|
|
|
- },
|
|
|
- ],
|
|
|
- multipleSelection: [],
|
|
|
-
|
|
|
- options: [
|
|
|
- {
|
|
|
- value: "1",
|
|
|
- label: "责任人1",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "2",
|
|
|
- label: "责任人2",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "3",
|
|
|
- label: "责任人3",
|
|
|
- },
|
|
|
- ],
|
|
|
- value: "",
|
|
|
-
|
|
|
- options2: [
|
|
|
- {
|
|
|
- value: "1",
|
|
|
- label: "路线1",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "2",
|
|
|
- label: "路线2",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "3",
|
|
|
- label: "路线3",
|
|
|
- },
|
|
|
- ],
|
|
|
- value2: "",
|
|
|
-
|
|
|
- options3: [
|
|
|
- {
|
|
|
- value: "1",
|
|
|
- label: "单位名称1",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "2",
|
|
|
- label: "单位名称2",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "3",
|
|
|
- label: "单位名称3",
|
|
|
- },
|
|
|
- ],
|
|
|
- value3: "",
|
|
|
-
|
|
|
- input: "",
|
|
|
-
|
|
|
- dialogAddVisible: false,
|
|
|
- form: {
|
|
|
- name: "",
|
|
|
- region: "",
|
|
|
- region2: "",
|
|
|
- date1: "",
|
|
|
- date2: "",
|
|
|
- delivery: false,
|
|
|
- type: [],
|
|
|
- resource: "",
|
|
|
- desc: "",
|
|
|
- },
|
|
|
- formLabelWidth: "120px",
|
|
|
-
|
|
|
- dialogPointVisible: false,
|
|
|
- tableDataPoint: [
|
|
|
- {
|
|
|
- order: "1",
|
|
|
- pointName: "867725032779518",
|
|
|
- pointAddress: "青浦区徐泾镇徐乐路208号虹泾1楼",
|
|
|
- },
|
|
|
- {
|
|
|
- order: "2",
|
|
|
- pointName: "867725032779518",
|
|
|
- pointAddress: "青浦区徐泾镇徐乐路208号虹泾2楼",
|
|
|
- },
|
|
|
- {
|
|
|
- order: "3",
|
|
|
- pointName: "867725032779518",
|
|
|
- pointAddress: "青浦区徐泾镇徐乐路208号虹泾3楼",
|
|
|
- },
|
|
|
- ],
|
|
|
-
|
|
|
- dialogRouteDetailVisible: false,
|
|
|
-
|
|
|
- // 上传图片
|
|
|
- fileList: [
|
|
|
-
|
|
|
- ],
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //定义导出Excel表格事件
|
|
|
- exportExcel() {
|
|
|
- /* 从表生成工作簿对象 */
|
|
|
- var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
|
|
|
- /* 获取二进制字符串作为输出 */
|
|
|
- var wbout = XLSX.write(wb, {
|
|
|
- bookType: "xlsx",
|
|
|
- bookSST: true,
|
|
|
- type: "array",
|
|
|
- });
|
|
|
- try {
|
|
|
- FileSaver.saveAs(
|
|
|
- //Blob 对象表示一个不可变、原始数据的类文件对象。
|
|
|
- //Blob 表示的不一定是JavaScript原生格式的数据。
|
|
|
- //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
|
|
|
- //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
|
|
|
- new Blob([wbout], { type: "application/octet-stream" }),
|
|
|
- //设置导出文件名称
|
|
|
- "sheetjs.xlsx"
|
|
|
- );
|
|
|
- } catch (e) {
|
|
|
- if (typeof console !== "undefined") console.log(e, wbout);
|
|
|
- }
|
|
|
- return wbout;
|
|
|
- },
|
|
|
- handleEdit(index, row) {
|
|
|
- alert(index, row);
|
|
|
- },
|
|
|
- handleDelete(index, row) {
|
|
|
- this.$confirm("确定删除该数据吗?", "删除", {
|
|
|
- confirmButtonText: "确定",
|
|
|
- cancelButtonText: "取消",
|
|
|
- type: "warning",
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- this.$message({
|
|
|
- type: "success",
|
|
|
- message: "删除成功!",
|
|
|
- });
|
|
|
- this.tableData.splice(index, 1);
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- this.$message({
|
|
|
- type: "info",
|
|
|
- message: "已取消删除",
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- batchDelete() {
|
|
|
- let multData = this.multipleSelection;
|
|
|
- let tableData = this.tableData;
|
|
|
- let multDataLen = multData.length;
|
|
|
- let tableDataLen = tableData.length;
|
|
|
-
|
|
|
- for (let i = 0; i < multDataLen; i++) {
|
|
|
- for (let y = 0; y < tableDataLen; y++) {
|
|
|
- if (JSON.stringify(tableData[y]) == JSON.stringify(multData[i])) {
|
|
|
- //判断是否相等，相等就删除
|
|
|
- this.tableData.splice(y, 1);
|
|
|
- console.log("aa");
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- handleSelectionChange(val) {
|
|
|
- this.multipleSelection = val;
|
|
|
- },
|
|
|
-
|
|
|
- //上传图片
|
|
|
- handleRemove(file, fileList) {
|
|
|
- console.log(file, fileList);
|
|
|
- },
|
|
|
- handlePreview(file) {
|
|
|
- console.log(file);
|
|
|
- },
|
|
|
- handleExceed(files, fileList) {
|
|
|
- this.$message.warning(
|
|
|
- `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
|
|
|
- files.length + fileList.length
|
|
|
- } 个文件`
|
|
|
- );
|
|
|
- },
|
|
|
- beforeRemove(file, fileList) {
|
|
|
- return this.$confirm(`确定移除 ${file.name}？`);
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style scoped>
|
|
|
-.table-tit {
|
|
|
- background: rgb(235, 241, 255);
|
|
|
- border: 1px solid #d9d9d9;
|
|
|
- border-bottom: 0;
|
|
|
- font-weight: bold;
|
|
|
- padding: 8px 10px;
|
|
|
-}
|
|
|
-</style>
|
ming