tire-platform-ui/src/views/landTransportation/antiepidemic/index.vue

<template>
  <div>
    <basic-container v-if="key>0">
      <avue-crud
          :data="goodsList"
          :option="goodsOptionCrud"
          :table-loading="loading"
          :page.sync="page"
          v-model="form"
          ref="crud"
          @row-save="rowSave"
          @row-del="rowDel"
          @on-load="onLoad"
          @resetColumn="resetColumn"
          @saveColumn="saveColumn"
          @row-update="(form,index,done,loading)=>{rowSave(form,done)}"
          @search-change="searchChange"
          @search-criteria-switch="searchCriteriaSwitch">
        <template slot-scope="{row,index}" slot="menu">
          <el-button
              size="small"
              type="text"
              icon="el-icon-picture-outline"
              @click="annexOpen(row, index)"
          >附 件
          </el-button>
        </template>
      </avue-crud>
      <el-dialog
          title="附件"
          :visible.sync="dialogVisible"
          :close-on-click-modal="false"
          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"
            :action="action"
            :file-list="orderList"
            :headers="headers"
            :on-remove="onRemove"
            :on-success="onSuccess"
            >
          <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">保 存</el-button>
        </span>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
import {
  driverQueryCollection,
  getAttachment,
  enclosure, antiepidemicSave,remove
} from "@/api/landTransportation/antiepidemic";
import {getToken} from "@/util/auth";
import {sharedDeletion} from "@/api/user";
import {deleteDetails} from "@/api/basicData/configuration";

export default {
  name: "index",
  data() {
    return {
      visible:false,
      dialogImageUrl:'',
      key:0,
      form: {},
      orderList:[],
      action: "/api/blade-resource/oss/endpoint/put-file",
      headers: { "Blade-Auth": "Bearer " + getToken() },
      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: true,
        delBtn: true,
        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: '制单日期',
          type: "date",
          searchRange: true,
          defaultTime: ['00:00:00', '23:59:59'],
          format: "yyyy-MM-dd HH:mm:ss",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
          prop: 'createTime',
          overHidden: true,
          display:false,
          search: true,
          index: 3,
          width: 150
        },{
          label: '箱号一',
          prop: 'ctnOne',
          overHidden: true,
          index: 4,
          search: true,
          width: 150
        },{
          label: '箱号二',
          prop: 'ctnTwo',
          overHidden: true,
          index: 5,
          search: true,
          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: {
    //删除
    rowDel(form,index){
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return remove({ids:form.id});
      }).then(() => {
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        this.page.currentPage = 1;
        this.onLoad(this.page, {})
      });
    },
    //新增
    rowSave(form,done,loading){
      // console.log(this.deepClone(this.form))
      antiepidemicSave({
        ...this.deepClone(this.form),
        fileList:[]
      }).then(res=>{
        if (res.data.code === 200){
          if (this.form.id){
            this.$message.success("修改成功");
          }else {
            this.$message.success("新增成功");
          }
          this.onLoad(this.page, {})
        }
        done()
      })
    },
    //保存修改附件
    saveAnnex(){
      enclosure(this.orderList).then(res=>{
        if (res.data.code === 200){
          this.$message.success("保存成功");
          this.dialogVisible = false
        }
      })
    },
    onSuccess(response, file, fileList) {
      this.orderList.push({
        fileName:response.data.originalName,
        url:response.data.link,
        pid:this.form.id
      })
    },
    onRemove(file, fileList) {
      sharedDeletion('/api/blade-client/common-file/remove', file.id).then(res => {
        if (res.data.success) {
          this.$message.success("操作成功!");
          this.orderList = fileList
        }
      });
    },
    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 - 51
      } else {
        this.goodsOptionCrud.height = this.goodsOptionCrud.height + 51
      }
      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>