FE-V2-PC/src/views/gasManage3_0/manage/supplierManage/supplierManage.vue

<!--供应商管理-->
<template>
  <div class="app-container  supplier">
    <div class="supplier_handle-page" v-if="pageType == 1">
      <el-form :model="queryParams" ref="queryForm" style="margin-top:20px;" :inline="true" label-width="120">
        <el-form-item label="关键字" prop="name">
          <el-input
            v-model="queryParams.searchValue"
            placeholder="名称/联系人/联系电话"
            clearable
            maxLength="30"
            size="small"
          />
        </el-form-item>
        <el-form-item label="状态" prop="zgType" label-width="80px">
          <el-select v-model="queryParams.status" placeholder="请选择" clearable size="small">
            <el-option label="启用" value="0" />
            <el-option label="禁用" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <p class="inquire-button-one" @click="handleQuery">查询</p>
          <p class="reset-button-one" @click="resetQuery">重置</p>
        </el-form-item>
        <el-form-item label="" prop="title" style="float: right">
          <el-dropdown @command="exportButton" style="float: left"   v-hasPermi="['airbottle:taskManage:export']">
            <div class="form-dropdown-box">
              <img src="@/assets/ZDimages/personnelManagement/icon_jzgxx_sc.png">
              <p>导出</p>
              <img src="@/assets/ZDimages/personnelManagement/icon_jzggl_xljt.png">
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;color:#333;" :command="{command:1}">导出全部数据</el-dropdown-item>
              <el-dropdown-item style="margin:0 10px;color:#666;" :command="{command:2}">导出选中数据</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-col :span="1.5" style="margin-left: 10px;">
            <p class="add-button-one-120"
               @click="handleClick('','','add')"
               v-hasPermi="['airbottle:supplier:add']"
            ><i class="el-icon-plus"></i>新增供应商</p>
          </el-col>
          <p class="inquire-button-one"  v-hasPermi="['airbottle:audit:edit']" style="width: 120px;margin-left: 10px;"   @click="handleClick('','','audit')">审核供应商</p>
        </el-form-item>
      </el-form>
      <el-table border v-loading="loading" :data="tableData" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
        <el-table-column type="selection" width="50" align="center"/>
        <el-table-column label="供应商名称" align="left" prop="companyName"/>
        <el-table-column label="供应商简称" align="left" prop="companyShort"></el-table-column>
        <el-table-column label="联系人" align="left" prop="contacts"></el-table-column>
        <el-table-column label="联系方式" align="left" prop="phone"></el-table-column>
        <el-table-column label="运输人员" align="left" prop="peopleSum"></el-table-column>
        <el-table-column label="运输车辆" align="left" prop="carSum"></el-table-column>
        <el-table-column label="气瓶" align="left" prop="bottleSum"></el-table-column>
        <el-table-column label="状态" align="left" prop="status">
          <template slot-scope="scope">
            <el-switch
              class="switch"
              @change="switchChange(scope.row)"
              v-model="scope.row.status+''"
              active-value="0"
              inactive-value="1"
              active-text="启用"
              inactive-text="禁用"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="180">
          <template slot-scope="scope">
            <div  v-hasPermi="['airbottle:supplier:query']" class="button-box" style="display: inline-block;width: 90px;margin-right:20px;">
              <p class="table-min-button"
                 @click="handleClick('',scope.row,'detail')"
              >查看</p>
            </div>
            <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)">
                    <span class="el-dropdown-link">
                      更多<i class="el-icon-d-arrow-right el-icon--right"></i>
                    </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="edit" icon="el-icon-edit-outline" v-hasPermiAnd="['airbottle:supplier:edit']">编辑</el-dropdown-item>
                <el-dropdown-item command="delete" icon="el-icon-delete" >删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;height:32px;margin-top:15px;">
        <!--<p style="flex:4;"></p>-->
        <p style="text-align: left;margin:0;line-height:32px;margin-right:20px;font-size:14px;color:#999;">
          <i class="el-icon-warning" style="color:#0183FA;"></i>
          已选择 {{selectedNum}} 项
        </p>
        <div style="flex:5;">
          <pagination :page-sizes="[20, 30, 40, 50]"
            v-show="total>0"
            :total="total"
            style="margin:0;"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </div>
    <!--新增页面-->
    <add-page v-if="pageType==2" :pageData="pageData"></add-page>
     <!--详情页面-->
    <detail-page v-if="pageType==3" :pageData2="pageData2"></detail-page>
    <!--审核页面-->
    <check-page v-if="pageType==4"></check-page>
  </div>
</template>

<script>
import { supplierDelete, supplierList, supplierStop } from '@/api/gasManage3_0/gasManage'
import { getToken } from "@/utils/auth";
import addPage from "./supplierManageAdd.vue"
import detailPage from "./supplierManageDetail.vue"
import checkPage from "./supplierManageCheckList.vue"

export default {
  name: "Approval",
  components: {
    addPage,
    detailPage,
    checkPage
  },
  data() {
    return {
      //页面状态
      pageType:1,
      loading:false,
      headers: {
        Authorization: "Bearer " + getToken()
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize:20,
        name:'',
      },
      total:0,
      tableData:[{}],
      dateRange:[],
      pageData:{},
      pageData2:{},
      //导出
      //表格扩展选择器---需要在@selection-change绑定的方法内监控selection数组长度
      selectedNum:0,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
    };


  },
  methods: {
      handleClick(index,row,doType){
        let _this=this;
        if(doType=='export'){//导出
          this.download('airbottle/supplier/export', {
            ...this.queryParams
          }, `供应商记录导出.xlsx`)
        }else if(doType=='add'){//添加
          _this.pageData.status=0;
          _this.pageData.id='';
          _this.pageType=2;
        }else if(doType=='detail'){//详情
          _this.pageData2.id=row.id;
          _this.pageType=3;
        }else if(doType=='audit'){//审核
          _this.pageType=4;
        }else if(doType=='back'){//审核
          _this.pageType=1;
        }
      },
    /** 当前时间 */
    getCurrentTime () {
      const yy = new Date().getFullYear()
      const mm = new Date().getMonth() + 1
      const dd = new Date().getDate()
      const hh = new Date().getHours()
      const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      return yy + '-' + mm + '-' + dd
    },
    /** 导出按钮操作 */
    exportButton(item) {
      let self = this;
      let currentDate = this.getCurrentTime()
      if(item.command == 1){
        self.$confirm(`确认导出全部数据?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(async () => {
          self.download('/airbottle/supplier/export/', {...self.queryParamsData}, '供应商记录导出-'+currentDate+'.xlsx')
        }).catch(() => {})
      }else if(item.command == 2){
        if(self.ids.length>0) {
          self.$confirm(`确认导出选中数据?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(async () => {
            let ids = self.ids.join(',');
            let obj = {
              ids :ids
            }
            console.log("obj",obj)
            self.download(`/airbottle/supplier/export/`,obj, '供应商记录导出-'+currentDate+'.xlsx')
          }).catch(() => {})
        }else {
          this.msgError('请选择要导出的数据')
        }
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectedNum = selection.length;
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /*===记录勾选数据===
      需要再el-table 添加  :row-key="getRowKeys"
      需要在selection 添加 :reserve-selection="true"
    */
    getRowKeys(row) {
      return row.id
    },
    // 更多操作触发
    handleCommand(command, row) {
        let _this=this;
      switch (command) {
        case "edit":
          _this.pageData.status=1;
          _this.pageData.id=row.id;
          _this.pageType=2;
          break;
        case "delete":
          this.handleDelete(row);
          break;
        default:
          break;
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      let _this=this
      this.$confirm('是否确认删除?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        supplierDelete(row.id).then( response => {
          _this.msgSuccess("删除成功");
          _this.getList();
        });
      }).then(() => {
        _this.getList();

      }).catch(() => {});
    },
    //状态
    switchChange(row){
      console.log(row.status)
      //1上架0下架
      this.$confirm('是否确定'+(row.status==1?'启用':'禁用')+'?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.upDownShelf(row.id,row.status==0?1:0)


      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //上架下架
    upDownShelf(id,status){
      let obj = {
        id:id,
        status:status,//课程状态 0 下架，1 上架
      };
      supplierStop(obj).then( response => {
        this.msgSuccess(status==0?"启用供应商成功!":'停用供应商成功!');
        this.getList();
      });
    },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/hazard/export', {
          ...this.queryParams
        }, `system_hazard.xlsx`)
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams.searchValue = "";
        this.queryParams.status = "";
        this.handleQuery();
      },
    getList(){
      let _this=this;
      supplierList(_this.queryParams).then( response => {
        let res=response.rows;
        _this.tableData=res;
        _this.total=response.total;
      });
    },
  },
  mounted() {
    this.getList()
  }
};
</script>

<style scoped lang="scss">
/*导出按钮样式*/
.form-dropdown-box{
  display: flex;
  margin:0;
  padding:0 10px;
  cursor: pointer;
  height:40px;
  img:nth-child(1){
    width:16px;
    height:16px;
    margin-top:12px;
  }
  p{
    width:47px;
    text-align: center;
    font-size:14px;
    margin:0;
    line-height:40px;
  }
  img:nth-child(3){
    width:10px;
    height:6px;
    margin-top:17px;
  }
}
  .supplier {
    display: flex!important;
    flex-direction: column;
    .supplier_handle-page{
      flex:1;
      display: flex!important;
      flex-direction: column;
      box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
      padding:20px 20px 20px!important;
      border-radius:10px;

      .button-box{
        width:200px;
        display: flex;
      }
    }

  }
</style>

<style lang="scss">
.supplier{
  .supplier_handle-page{
    .switch .el-switch__label {
      position: absolute;
      display: none;
      color: #fff !important;
    }
    .switch .el-switch__label--right {
      z-index: 1;
    }
    .switch .el-switch__label--right span{
      margin-right:10px;
    }
    .switch .el-switch__label--left {
      z-index: 1;
    }
    .switch .el-switch__label--left span{
      margin-left: 14px;
    }
    .switch .el-switch__label.is-active {
      display: block;
    }
    .switch.el-switch .el-switch__core,
    .el-switch .el-switch__label {
      width: 64px !important;
      margin: 0;
    }
  }
}
</style>