xymp
/
frontend
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

拍照时间页面优化

Browse Source
master
fanluyan 2 years ago
parent 51b1fdeead
commit 5d4fc79767
4 changed files with 264 additions and 435 deletions
Show Stats Download Patch File Download Diff File

34
src/assets/css/theme.less
Unescape Escape View File

@ -274,3 +274,37 @@
background-color: #f08200; background-color: #f08200;
} }
} }
.el-table {
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
border-bottom: 1px solid #ebeef5;
}
.el-table__header-wrapper,
.el-table__fixed-header-wrapper {
border-top: 1px solid #ebeef5;
}
th.el-table__cell {
background: #f8f8f8;
}
.el-button--text {
padding: 0px;
}
.el-button + .el-button,
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
margin-left: 16px;
}
.deleteText {
color: #f56c6c;
}
}
.el-table::before,
.el-table__fixed-right::before,
.el-table__fixed::before {
height: 0px !important;
}
.pageNation {
margin-top: 8px;
display: flex;
justify-content: flex-end;
}

137
src/views/devicePhotoSchedule/components/adddeviceDialog.vue
Unescape Escape View File

@ -5,148 +5,27 @@
:visible.sync="deviceDialog" :visible.sync="deviceDialog"
width="420px" width="420px"
> >
<el-form <p>内容</p>
label-position="left"
label-width="92px"
ref="formdeviceInfo"
:rules="rules"
:model="deviceForm"
>
<el-form-item label="单位：" prop="bsManufacturer">
<el-input
v-model="deviceForm.bsManufacturer"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item label="DY等级：" prop="dyLevel">
<el-input
v-model.number="deviceForm.dyLevel"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item label="线路名称：" prop="name">
<el-input v-model="deviceForm.name" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button @click="closeDialog(0)">取 消</el-button> <el-button @click="closeDialog()">取 消</el-button>
<el-button type="primary" @click="submitForm()">确 定</el-button> <el-button type="primary" @click="submitForm()">确 定</el-button>
</div> </div>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
//import { adddeviceJoggle, updatedeviceJoggle } from "@/utils/api/index";
export default { export default {
props: { props: {},
deviceDialog: {
type: Boolean,
},
deviceDialogTitle: {
type: String,
default: "新增",
},
formItem: {
type: Object,
default: function () {
return {};
},
},
},
data() { data() {
return { return {};
deviceForm: {},
rules: {
bsManufacturer: [
{ required: true, message: "请输入公司名称", trigger: "blur" },
],
dyLevel: [
{ required: true, message: "请选择DY等级", trigger: "blur" },
{ type: "number", message: "DY等级数字值" },
],
name: [
{
required: true,
message: "请输入线路名称",
trigger: "blur",
},
],
},
//表单数组，对象
formArr: [],
};
}, },
methods: { methods: {
// 保存确定操作 // 保存确定操作
submitForm() { submitForm() {},
this.$refs.formdeviceInfo.validate((valid) => {
if (valid) {
let formObj = {
bsManufacturer: this.deviceForm.bsManufacturer,
dyLevel: this.deviceForm.dyLevel,
name: this.deviceForm.name,
};
this.formArr.push(formObj);
console.log(this.formArr);
// 走保存请求
if (this.deviceDialogTitle == "新增") {
adddeviceJoggle({ list: this.formArr })
.then((res) => {
console.log(res);
this.$emit("deviceDialogClose", 1); //关闭弹窗
this.$message.success("添加成功");
})
.catch((err) => {
console.log(err); //代码错误、请求失败捕获
this.$message.error("添加失败");
});
} else if (this.deviceDialogTitle == "修改") {
let changeformObj = {
bsManufacturer: this.deviceForm.bsManufacturer,
dyLevel: this.deviceForm.dyLevel,
name: this.deviceForm.name,
id: this.deviceForm.id,
};
updatedeviceJoggle(changeformObj)
.then((res) => {
console.log(res);
this.$emit("deviceDialogClose", 1); //关闭弹窗
this.$message.success("修改成功");
})
.catch((err) => {
console.log(err); //代码错误、请求失败捕获
this.$message.error("修改失败");
});
}
} else {
console.log("error submit!!");
return false;
}
});
},
//取消关闭弹窗 //取消关闭弹窗
closeDialog(flag) { closeDialog(flag) {},
this.$refs.formdeviceInfo.resetFields();
this.$emit("deviceDialogClose", flag);
},
},
mounted() {
console.log("打印传过来的对象", this.formItem);
console.log("打印传过来的对象", this.formItem.bsIdentifier);
this.deviceForm = JSON.parse(JSON.stringify(this.formItem));
},
watch: {
formItem: {
handler(newVal, oldVal) {
// 调用函数
this.$nextTick(() => {
this.deviceForm = JSON.parse(JSON.stringify(this.formItem));
});
},
immediate: true,
deep: true,
},
}, },
mounted() {},
watch: {},
}; };
</script> </script>

262
src/views/devicePhotoSchedule/index.vue
Unescape Escape View File

@ -1,116 +1,95 @@
<template> <template>
<div class="deviceInformation"> <div class="deviceInformation">
<div class="deviceBtnGroup"> <div class="deviceBox">
<el-button type="primary" @click="handleAdddevice()">新增</el-button> <div class="deviceBtnGroup">
<el-button type="primary" @click="handleResive()">修改</el-button> <el-button type="primary" icon="el-icon-plus" @click="handleAdddevice()"
<!-- <el-button type="primary">批量添加</el-button> --> >新增</el-button
<el-button type="primary" @click="handleDelete()">删除</el-button> >
</div>
<!-- <el-button type="primary">查询</el-button> --> <div class="deviceTable">
</div> <el-table
<!-- <div class="searchForm"> ref="multipleTable"
<el-form :indevice="true" :model="formIndevice" class="demo-form-indevice"> :data="deviceTableData"
<el-form-item label="单位:"> tooltip-effect="dark"
<el-select v-model="formIndevice.region" placeholder="活动区域"> style="width: 100%"
<el-option label="区域一" value="shanghai"></el-option> height="calc(100% - 40px)"
<el-option label="区域二" value="beijing"></el-option> @selection-change="handleSelectionChange"
</el-select> @row-click="handleRowClick"
</el-form-item>
<el-form-item label="DY等级:">
<el-select v-model="formIndevice.region" placeholder="活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="XL名称:">
<el-input v-model="formIndevice.user" placeholder="审批人"></el-input>
</el-form-item>
<el-form-item label="是否为采集">
<el-select v-model="formIndevice.region" placeholder="活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="PMS编号:">
<el-input v-model="formIndevice.user" placeholder="审批人"></el-input>
</el-form-item>
</el-form>
</div> -->
<div class="deviceTable">
<el-table
ref="multipleTable"
:data="deviceTableData"
tooltip-effect="dark"
style="width: 100%"
height="calc(100% - 40px)"
border
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
>
<el-table-column type="index" width="55"> </el-table-column>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="单位" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column label="时间表类型" show-overflow-tooltip>
<template>时间表类型</template>
</el-table-column>
<el-table-column
prop="startTime"
label="开始时间"
show-overflow-tooltip
> >
</el-table-column> <!-- <el-table-column type="index" width="55"> </el-table-column>
<el-table-column prop="endTime" label="结束时间" show-overflow-tooltip> <el-table-column type="selection" width="55"> </el-table-column> -->
</el-table-column> <el-table-column label="单位" show-overflow-tooltip>
<el-table-column prop="span" label="间隔（分）" show-overflow-tooltip> <template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column> </el-table-column>
<el-table-column prop="remark" label="备注" show-overflow-tooltip> <el-table-column label="时间表类型" show-overflow-tooltip>
</el-table-column> <template>时间表类型</template>
<el-table-column fixed="right" label="操作" width="200"> </el-table-column>
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" <el-table-column
>修改</el-button prop="startTime"
> label="开始时间"
<el-button type="text">删除</el-button> show-overflow-tooltip
</template> >
</el-table-column> </el-table-column>
</el-table> <el-table-column
prop="endTime"
label="结束时间"
show-overflow-tooltip
>
</el-table-column>
<el-table-column prop="span" label="间隔（分）" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="remark" label="备注" show-overflow-tooltip>
</el-table-column>
<el-table-column fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button
@click.native.stop="handleResive(scope.row)"
type="text"
>修改</el-button
>
<el-button
type="text"
class="deleteText"
@click.native.stop="handleDelete(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<div class="pageNation">
<el-pagination
@current-change="handleCurrentChange"
:current-page="page"
:page-size="pageSize"
layout=" prev, pager, next, jumper,total"
:total="total"
background
>
</el-pagination>
</div>
</div>
</div> </div>
<!-- 新增线路 --> <!-- 新增线路 -->
<adddeviceDialog
:deviceDialog="deviceDialog"
:deviceDialogTitle="deviceDialogTitle"
:formItem="formdeviceInfo"
@deviceDialogClose="deviceDialogClose"
></adddeviceDialog>
</div> </div>
</template> </template>
<script> <script>
import { import { getScheduleRulelListJoggle } from "@/utils/api/index";
getScheduleRulelListJoggle,
// deletedeviceJoggle,
} from "@/utils/api/index";
import adddeviceDialog from "./components/adddeviceDialog.vue";
export default { export default {
components: { components: {},
adddeviceDialog,
},
data() { data() {
return { return {
formIndevice: {
user: "",
region: "",
},
deviceDialogTitle: "", //弹窗标题 deviceDialogTitle: "", //弹窗标题
deviceDialog: false, deviceDialog: false,
formdeviceInfo: {}, //弹窗传值 formdeviceInfo: {}, //弹窗传值
deviceTableData: [], deviceTableData: [],
multipleSelection: [], //获取当前选中 //multipleSelection: [], //获取当前选中
//删除数组 //删除数组
deleteArr: [], deleteArr: [],
page: 1, // 当前页数
pageSize: 20, // 每页数量
total: 0, //总条数
}; };
}, },
methods: { methods: {
@ -128,7 +107,6 @@ export default {
//点击行选中 //点击行选中
handleRowClick(row, column, event) { handleRowClick(row, column, event) {
this.$refs.multipleTable.toggleRowSelection(row); this.$refs.multipleTable.toggleRowSelection(row);
// console.log(column, row, event);
}, },
//获取选中的行 //获取选中的行
handleSelectionChange(val) { handleSelectionChange(val) {
@ -142,68 +120,15 @@ export default {
}, },
//handleResive 修改线路数据 //handleResive 修改线路数据
handleResive() { handleResive(data) {},
if (this.multipleSelection.length !== 1) {
this.$message({
showClose: true,
message: "请选择要操作的记录最多只能选择一条！",
type: "warning",
});
} else {
console.log(this.multipleSelection);
this.deviceDialogTitle = "修改";
this.formdeviceInfo = Object.assign({}, this.multipleSelection[0]);
this.deviceDialog = true;
}
},
//新建弹窗取消按钮 关闭弹窗
deviceDialogClose(flag) {
if (flag) {
//更新列表
this.deviceList();
}
this.deviceDialog = false;
},
//删除数据 //删除数据
handleDelete() { handleDelete() {},
if (this.multipleSelection.length == 0) { //点击分页
this.$message({ handleCurrentChange(val) {
showClose: true, console.log(`当前页: ${val}`);
message: "请选择要操作的记录！", this.page = val;
type: "warning", //this.getTableList();
});
} else {
console.log(this.multipleSelection);
for (let i in this.multipleSelection) {
console.log(i);
this.deleteArr.push({
id: this.multipleSelection[i].id,
});
}
console.log(this.deleteArr);
this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
// 行设置向后台请求删除数据
deletedeviceJoggle({ list: this.deleteArr }).then((res) => {
console.log(res);
this.deviceList(); //刷新
});
this.$message({
type: "success",
message: "删除成功!",
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
}
}, },
}, },
created() { created() {
@ -214,19 +139,22 @@ export default {
<style lang="less"> <style lang="less">
.deviceInformation { .deviceInformation {
width: 100%; width: 100%;
height: 100%; width: calc(100% - 16px);
height: calc(100% - 32px);
padding: 16px 8px;
background: @color-white; background: @color-white;
.deviceBtnGroup {
padding: 16px 8px; .deviceBox {
border: 1px solid #dddddd;
height: calc(100% - 32px);
padding: 16px;
border-radius: 4px;
} }
.searchForm { .deviceBtnGroup {
padding: 0px 8px; display: flex;
.el-form { justify-content: flex-end;
.el-form-item {
margin-bottom: 0px;
}
}
} }
.deviceTable { .deviceTable {
padding: 16px 8px 0 8px; padding: 16px 8px 0 8px;
height: calc(100% - 80px); height: calc(100% - 80px);

266
src/views/management/userEquipment/lineInformation/index.vue
Unescape Escape View File

@ -1,78 +1,79 @@
<template> <template>
<div class="lineInformation"> <div class="lineInformation">
<div class="lineBtnGroup"> <div class="lineBox">
<el-button type="primary" @click="handleAddLine()">新增</el-button> <div class="lineBtnGroup">
<el-button type="primary" @click="handleResive()">修改</el-button> <el-button type="primary" icon="el-icon-plus" @click="handleAddLine()"
<!-- <el-button type="primary">批量添加</el-button> --> >新增</el-button
<el-button type="primary" @click="handleDelete()">删除</el-button> >
<!-- <el-button type="primary">查询</el-button> --> <!-- <el-button type="primary" @click="handleResive()">修改</el-button>
</div> <el-button type="primary" @click="handleDelete()">删除</el-button> -->
<!-- <div class="searchForm"> </div>
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <div class="lineTable">
<el-form-item label="单位:"> <el-table
<el-select v-model="formInline.region" placeholder="活动区域"> ref="multipleTable"
<el-option label="区域一" value="shanghai"></el-option> :data="lineTableData"
<el-option label="区域二" value="beijing"></el-option> tooltip-effect="dark"
</el-select> style="width: 100%"
</el-form-item> height="calc(100% - 40px)"
<el-form-item label="DY等级:"> @selection-change="handleSelectionChange"
<el-select v-model="formInline.region" placeholder="活动区域"> @row-click="handleRowClick"
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="XL名称:">
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
</el-form-item>
<el-form-item label="是否为采集">
<el-select v-model="formInline.region" placeholder="活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="PMS编号:">
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
</el-form-item>
</el-form>
</div> -->
<div class="lineTable">
<el-table
ref="multipleTable"
:data="lineTableData"
tooltip-effect="dark"
style="width: 100%"
height="calc(100% - 40px)"
border
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
:header-cell-style="{ background: '#F5F7FA' }"
>
<el-table-column type="index" width="55"> </el-table-column>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="单位" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.bsManufacturer }}</template>
</el-table-column>
<el-table-column prop="id" label="线路id" show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="name"
label="XL名称"
min-width="95"
show-overflow-tooltip
> >
</el-table-column> <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
<el-table-column prop="dyLevel" label="DY等级" show-overflow-tooltip> <el-table-column label="单位" show-overflow-tooltip>
</el-table-column> <template slot-scope="scope">{{
<el-table-column fixed="right" label="操作" width="200"> scope.row.bsManufacturer
<template slot-scope="scope"> }}</template>
<el-button @click="handleClick(scope.row)" type="text" </el-table-column>
>修改</el-button <el-table-column
> prop="id"
<el-button type="text">删除</el-button> label="线路id"
</template> show-overflow-tooltip
</el-table-column> min-width="120"
</el-table> >
</el-table-column>
<el-table-column
prop="name"
label="XL名称"
min-width="120"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="dyLevel"
label="DY等级"
show-overflow-tooltip
min-width="120"
>
</el-table-column>
<el-table-column fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button
@click.native.stop="handleResive(scope.row)"
type="text"
>修改</el-button
>
<el-button
type="text"
class="deleteText"
@click.native.stop="handleDelete(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<div class="pageNation">
<el-pagination
@current-change="handleCurrentChange"
:current-page="page"
:page-size="pageSize"
layout=" prev, pager, next, jumper,total"
:total="total"
background
>
</el-pagination>
</div>
</div>
</div> </div>
<!-- 新增线路 --> <!-- 新增线路 -->
<add-lineDialog <add-lineDialog
@ -93,17 +94,16 @@ export default {
}, },
data() { data() {
return { return {
formInline: {
user: "",
region: "",
},
lineDialogTitle: "", //弹窗标题 lineDialogTitle: "", //弹窗标题
lineDialog: false, lineDialog: false,
formLineInfo: {}, //弹窗传值 formLineInfo: {}, //弹窗传值
lineTableData: [], lineTableData: [],
multipleSelection: [], //获取当前选中 //multipleSelection: [], //获取当前选中
//删除数组 //删除数组
deleteArr: [], deleteArr: [],
page: 1, // 当前页数
pageSize: 20, // 每页数量
total: 0, //总条数
}; };
}, },
methods: { methods: {
@ -135,19 +135,11 @@ export default {
}, },
//handleResive 修改线路数据 //handleResive 修改线路数据
handleResive() { handleResive(data) {
if (this.multipleSelection.length !== 1) { console.log(data);
this.$message({ this.lineDialogTitle = "修改";
showClose: true, this.formLineInfo = Object.assign({}, data);
message: "请选择要操作的记录最多只能选择一条！", this.lineDialog = true;
type: "warning",
});
} else {
console.log(this.multipleSelection);
this.lineDialogTitle = "修改";
this.formLineInfo = Object.assign({}, this.multipleSelection[0]);
this.lineDialog = true;
}
}, },
//新建弹窗取消按钮 关闭弹窗 //新建弹窗取消按钮 关闭弹窗
lineDialogClose(flag) { lineDialogClose(flag) {
@ -156,47 +148,43 @@ export default {
this.lineList(); this.lineList();
} }
this.lineDialog = false; this.lineDialog = false;
this.formLineInfo = {};
}, },
//删除数据 //删除数据
handleDelete() { handleDelete(data) {
if (this.multipleSelection.length == 0) { console.log(data);
this.$message({ this.deleteArr.push({
showClose: true, id: data.id,
message: "请选择要操作的记录！", });
type: "warning", console.log(this.deleteArr);
}); this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
} else { confirmButtonText: "确定",
console.log(this.multipleSelection); cancelButtonText: "取消",
for (let i in this.multipleSelection) { type: "warning",
console.log(i); })
this.deleteArr.push({ .then(() => {
id: this.multipleSelection[i].id, // 行设置向后台请求删除数据
deleteLineJoggle({ list: this.deleteArr }).then((res) => {
console.log(res);
this.lineList(); //刷新
});
this.$message({
type: "success",
message: "删除成功!",
}); });
}
console.log(this.deleteArr);
this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}) })
.then(() => { .catch(() => {
// 行设置向后台请求删除数据 this.$message({
deleteLineJoggle({ list: this.deleteArr }).then((res) => { type: "info",
console.log(res); message: "已取消删除",
this.lineList(); //刷新
});
this.$message({
type: "success",
message: "删除成功!",
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
}); });
} });
},
//点击分页
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.page = val;
//this.getTableList();
}, },
}, },
created() { created() {
@ -206,24 +194,24 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
.lineInformation { .lineInformation {
width: 100%; width: calc(100% - 16px);
height: 100%; height: calc(100% - 32px);
padding: 16px 8px;
background: @color-white; background: @color-white;
.lineBtnGroup { .lineBox {
padding: 16px 8px; border: 1px solid #dddddd;
height: calc(100% - 32px);
padding: 16px;
border-radius: 4px;
} }
.searchForm { .lineBtnGroup {
padding: 0px 8px; display: flex;
.el-form { justify-content: flex-end;
.el-form-item {
margin-bottom: 0px;
}
}
} }
.lineTable { .lineTable {
padding: 16px 8px 0 8px; margin-top: 16px;
height: calc(100% - 80px); height: calc(100% - 48px);
//background: #fcc;
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save