|
|
@@ -0,0 +1,365 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <basic-container v-if="key>0">
|
|
|
+ <avue-crud
|
|
|
+ :data="goodsList"
|
|
|
+ :option="goodsOptionCrud"
|
|
|
+ :table-loading="loading"
|
|
|
+ :page.sync="page"
|
|
|
+ ref="crud"
|
|
|
+ @on-load="onLoad"
|
|
|
+ @resetColumn="resetColumn"
|
|
|
+ @saveColumn="saveColumn"
|
|
|
+ @search-change="searchChange"
|
|
|
+ @search-criteria-switch="searchCriteriaSwitch">
|
|
|
+ <template slot-scope="{row,index}" slot="menu">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="text"
|
|
|
+ @click="annexOpen(row, index)"
|
|
|
+ >附 件
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </avue-crud>
|
|
|
+ <el-dialog
|
|
|
+ title="附件"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ append-to-body
|
|
|
+ width="80%">
|
|
|
+<!-- <c-upload-->
|
|
|
+<!-- typeUpload="GZ"-->
|
|
|
+<!-- :basic="true"-->
|
|
|
+<!-- deleteUrl="/api/blade-client/common-file/remove"-->
|
|
|
+<!-- :data="orderList"-->
|
|
|
+<!-- :disabled="true"-->
|
|
|
+<!-- :enumerationValue="76"-->
|
|
|
+<!-- ></c-upload>-->
|
|
|
+ <el-upload
|
|
|
+ class="hide"
|
|
|
+ list-type="picture-card"
|
|
|
+ :on-preview="handlePictureCardPreview"
|
|
|
+ :file-list="orderList"
|
|
|
+ disabled>
|
|
|
+ <i class="el-icon-plus"></i>
|
|
|
+ </el-upload>
|
|
|
+ <el-dialog :visible.sync="visible" append-to-body>
|
|
|
+ <img width="100%" :src="dialogImageUrl" alt="">
|
|
|
+ </el-dialog>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false" size="small">取 消</el-button>
|
|
|
+<!-- <el-button type="primary" @click="saveAnnex" size="small" :disabled="form.status===4">保 存</el-button>-->
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </basic-container>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ driverQueryCollection,
|
|
|
+ getAttachment
|
|
|
+} from "@/api/landTransportation/antiepidemic";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "index",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visible:false,
|
|
|
+ dialogImageUrl:'',
|
|
|
+ key:0,
|
|
|
+ form: {},
|
|
|
+ orderList:[],
|
|
|
+ dialogVisible: false,
|
|
|
+ loading: false,
|
|
|
+ activeName:'',
|
|
|
+ page: {
|
|
|
+ pageSize: 10,
|
|
|
+ currentPage: 1,
|
|
|
+ total: 0,
|
|
|
+ pageSizes: [10, 50, 100, 200, 300]
|
|
|
+ },
|
|
|
+ roleName: localStorage.getItem("roleName").split(',')[0],
|
|
|
+ goodsList: [],
|
|
|
+ goodsOptionCrud:{},
|
|
|
+ optionList: {
|
|
|
+ stripe:true,
|
|
|
+ index: true,
|
|
|
+ addBtn: false,
|
|
|
+ delBtn: false,
|
|
|
+ cellBtn: false,
|
|
|
+ cancelBtn: false,
|
|
|
+ editBtn: false,
|
|
|
+ addRowBtn: false,
|
|
|
+ searchIcon: true,
|
|
|
+ searchIndex: 2,
|
|
|
+ searchSpan: 8,
|
|
|
+ searchMenuPosition: "right",
|
|
|
+ searchMenuSpan: 6,
|
|
|
+ align: 'center',
|
|
|
+ height: "auto",
|
|
|
+ column: [{
|
|
|
+ label: '车牌号',
|
|
|
+ prop: 'plateNo',
|
|
|
+ overHidden: true,
|
|
|
+ index: 1,
|
|
|
+ width: 150,
|
|
|
+ search: true,
|
|
|
+ },{
|
|
|
+ label: '电话',
|
|
|
+ prop: 'tel',
|
|
|
+ overHidden: true,
|
|
|
+ index: 2,
|
|
|
+ width: 200,
|
|
|
+ search: true,
|
|
|
+ },{
|
|
|
+ label: '制单日期',
|
|
|
+ prop: 'createTime',
|
|
|
+ overHidden: true,
|
|
|
+ index: 3,
|
|
|
+ width: 150
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async created() {
|
|
|
+ this.goodsOptionCrud = await this.getColumnData(this.getColumnName(125), this.optionList);
|
|
|
+ this.key++
|
|
|
+ let i = 0;
|
|
|
+ this.goodsOptionCrud.column.forEach(item => {
|
|
|
+ if (item.search) i++
|
|
|
+ })
|
|
|
+ if (i % 3 !== 0) {
|
|
|
+ const num = 3 - Number(i % 3)
|
|
|
+ this.goodsOptionCrud.searchMenuSpan = num * 8;
|
|
|
+ this.goodsOptionCrud.searchMenuPosition = "right";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handlePictureCardPreview(file) {
|
|
|
+ this.dialogImageUrl = file.url;
|
|
|
+ this.visible = true;
|
|
|
+ },
|
|
|
+ //自定义列保存
|
|
|
+ async saveColumn() {
|
|
|
+ /**
|
|
|
+ * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
|
|
|
+ * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
|
|
|
+ * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
|
|
|
+ */
|
|
|
+ const inSave = await this.saveColumnData(this.getColumnName(125), this.goodsOptionCrud);
|
|
|
+ if (inSave) {
|
|
|
+ this.$message.success("保存成功");
|
|
|
+ //关闭窗口
|
|
|
+ this.$refs.crud.$refs.dialogColumn.columnBox = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //自定义列重置
|
|
|
+ async resetColumn() {
|
|
|
+ this.goodsOptionCrud = this.optionList;
|
|
|
+ const inSave = await this.delColumnData(this.getColumnName(125), this.optionList);
|
|
|
+ if (inSave) {
|
|
|
+ this.$message.success("重置成功");
|
|
|
+ this.$refs.crud.$refs.dialogColumn.columnBox = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获得高度
|
|
|
+ searchCriteriaSwitch(type) {
|
|
|
+ if (type) {
|
|
|
+ this.goodsOptionCrud.height = this.goodsOptionCrud.height - 230
|
|
|
+ } else {
|
|
|
+ this.goodsOptionCrud.height = this.goodsOptionCrud.height + 230
|
|
|
+ }
|
|
|
+ this.$refs.crud.getTableHeight()
|
|
|
+ },
|
|
|
+ //打开附件
|
|
|
+ annexOpen(row, index){
|
|
|
+ this.orderList = []
|
|
|
+ this.form = row
|
|
|
+ getAttachment({id:row.id}).then(res=>{
|
|
|
+ this.orderList = res.data.data
|
|
|
+ this.dialogVisible = true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //搜索
|
|
|
+ searchChange(params, done) {
|
|
|
+ let data = params
|
|
|
+ if (params.arrivalTime) {
|
|
|
+ data.beginArrivalTime = params.arrivalTime[0]
|
|
|
+ data.endArrivalTime = params.arrivalTime[1]
|
|
|
+ }
|
|
|
+ if (params.createTime) {
|
|
|
+ data.beginCrateTime = params.createTime[0]
|
|
|
+ data.endCrateTime = params.createTime[1]
|
|
|
+ }
|
|
|
+ delete data.arrivalTime
|
|
|
+ delete data.createTime
|
|
|
+ this.onLoad(this.page, params)
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ //查询
|
|
|
+ onLoad(page, params) {
|
|
|
+ let queryParams = {
|
|
|
+ size: page.pageSize,
|
|
|
+ current: page.currentPage,
|
|
|
+ ...params
|
|
|
+ }
|
|
|
+ this.loading = true;
|
|
|
+ driverQueryCollection(queryParams).then(res => {
|
|
|
+ this.goodsList = res.data.data.records
|
|
|
+ this.page.total = res.data.data.total
|
|
|
+ this.goodsOptionCrud.height = window.innerHeight - 250;
|
|
|
+ }).finally(() => {
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ ToBreak (val) {
|
|
|
+ if (val)return val.replace(/\n/g, '<br/>')
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+::v-deep .hide .el-upload--picture-card {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.home-container {
|
|
|
+ padding: 0px 5px 5px 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ ::v-deep .el-card__body {
|
|
|
+ padding: 10px 15px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__card {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ &_but {
|
|
|
+ margin-right: 10px;
|
|
|
+ border: 1px solid #409eff;
|
|
|
+ width: 80px;
|
|
|
+ border-radius: 3px;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ &_left {
|
|
|
+ width: 40px;
|
|
|
+ text-align: center;
|
|
|
+ color: #409eff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ &_right {
|
|
|
+ width: 40px;
|
|
|
+ text-align: center;
|
|
|
+ color: #409eff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ &_active {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #409eff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 6vh;
|
|
|
+ width: 80vw;
|
|
|
+
|
|
|
+ .divider {
|
|
|
+ display: block;
|
|
|
+ height: 0px;
|
|
|
+ width: 100%;
|
|
|
+ border-top: 1px dashed #dcdfe6;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ margin-left: 1vw;
|
|
|
+
|
|
|
+ .card {
|
|
|
+ width: 130px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 50%;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ span {
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-title1 {
|
|
|
+ color: #037fe1;
|
|
|
+ background-color: rgba(3, 127, 225, 0.15);
|
|
|
+ }
|
|
|
+
|
|
|
+ &-title2 {
|
|
|
+ color: #ffa21e;
|
|
|
+ background-color: rgba(255, 162, 30, 0.15);
|
|
|
+ }
|
|
|
+
|
|
|
+ &-title3 {
|
|
|
+ color: #fb5b60;
|
|
|
+ background-color: rgba(251, 91, 96, 0.15);
|
|
|
+ }
|
|
|
+
|
|
|
+ &-title4 {
|
|
|
+ color: #42bc6f;
|
|
|
+ background-color: rgba(66, 1125, 111, 0.15);
|
|
|
+ }
|
|
|
+
|
|
|
+ &-title5 {
|
|
|
+ color: #14cde1;
|
|
|
+ background-color: rgba(52, 149, 161, 0.15);
|
|
|
+ }
|
|
|
+
|
|
|
+ &-title6 {
|
|
|
+ color: rgba(4, 66, 31, 0.63);
|
|
|
+ background-color: rgba(66, 1125, 111, 0.15);
|
|
|
+ }
|
|
|
+
|
|
|
+ &-content {
|
|
|
+ padding-left: 1vw;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ &-num {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-text {
|
|
|
+ color: #909399;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
lichao