xujiecloud-vue/src/components/selector/table/projectTable.vue

<script>
import BuSelect from "../select/BuSelect.vue";
import {queryProjectList, queryProjectListByPage} from "../../../api/project/project";
import {updateColumnSize} from "../../../api/table";

export default {
  name: "projectTable",
  components: {BuSelect},
  model:{
    prop: "visible",
    event: "update"
  },
  props:{
    visible: {
      type: Boolean,
      default: false
    },
    customerNo:{
      type: String,
      default: ""
    },
    height:{
      type: Number,
      default: 300
    },
    isPage:{
      type: Boolean,
      default: false
    },
    projectNo:{
      type: String,
      default: ""
    },
    buId:{
      type: Number,
      default: ""
    },
    width:{
      type: Number,
      default: 800
    }
  },
  data(){
    return{
      no:1,
      size:20,
      total:0,
      project:{
        buId:"",
        projectNo:"",
        projectDesc:"",
        customerNo: "",
        customerDesc: ""
      },
      dataList:[],
      queryLoading: false,
    }
  },
  methods:{
    handleColumnResize(newWidth, oldWidth, column, event){
      let inData= this.columnList.filter(item => item.columnProp === column.property)[0]
      inData.columnWidth=newWidth
      updateColumnSize(inData).then(({data}) => {
        if (data.code === 0) {
          console.log("栏位宽度保存成功！")
        }
      })
    },
    handleDblClick(row){
      this.$emit("dblclick",row)
    },
    handleSizeChange(val){
      this.size = val
      this.handleQueryProjectListByPage()
    },
    handlePageChange(val){
      this.no = val
      this.handleQueryProjectListByPage()
    },
    handleQueryProjectListByPage(){
      let params = {
        ...this.project,
        createBy: this.$store.state.user.name,
        no:this.no,
        size:this.size
      }
      this.queryLoading = true
      queryProjectListByPage(params).then(({data})=>{
        if (data && data.code === 0){
          this.dataList = data.rows
          this.total = data.total
        }else {
          this.$message.warning(data.msg)
        }
        this.queryLoading = false
      }).catch((error)=>{
        this.$message.error(error)
        this.queryLoading = false
      })
    },
    handleQueryProjectList(){
      let params = {
        ...this.project,
         createBy: this.$store.state.user.name
      }
      this.queryLoading = true
      queryProjectList(params).then(({data})=>{
        if (data && data.code === 0){
          this.dataList = data.rows
        }else {
          this.$message.warning(data.msg)
        }
        this.queryLoading = false
      }).catch((error)=>{
        this.$message.error(error)
        this.queryLoading = false
      })
    },
  },
  created() {
    this.project.buId = this.buId
    this.project.customerNo = this.customerNo
    this.project.projectNo = this.projectNo
  },
  watch:{
    visible(newVal,oldVal){
      if (newVal){
        if (this.isPage){
          this.handleQueryProjectListByPage();
        }else {
          this.handleQueryProjectList();
        }
      }
    },
    customerNo(newVal,oldVal){
      this.project.customerNo = newVal
    },
    projectNo(newVal,oldVal){
      this.project.projectNo = newVal
    },
    buId(newVal,oldVal){
      this.project.buId = newVal
    },
  },
  computed:{
    open:{
      get(){
        return this.visible
      },
      set(val){
        this.$emit("update",val)
      }
    }
  }
}
</script>

<template>
  <el-dialog :visible.sync="open" v-drag title="项目信息" :close-on-click-modal="false" modal-append-to-body :width="`${width}px`">
    <el-form :model="project" label-position="top" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="6" v-if="!buId">
          <el-form-item label="BU">
            <bu-select v-model="project.buId" clearable></bu-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目编号">
            <el-input v-model="project.projectNo"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目名称">
            <el-input v-model="project.projectDesc"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="!customerNo">
          <el-row :gutter="20" >
            <el-col :span="6" >
              <el-form-item label="客户编码">
                <el-input v-model="project.customerNo"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户名称">
                <el-input v-model="project.customerDesc"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="4" >
          <el-form-item label=" ">
            <el-button type="primary" v-if="isPage" @click="handleQueryProjectListByPage">查询</el-button>
            <el-button type="primary" v-else @click="handleQueryProjectList">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="dataList" border style="width: 100%" :height="height" v-loading="queryLoading" @row-dblclick="handleDblClick" @header-dragend="handleColumnResize">
      <el-table-column label="BU" prop="buDesc"></el-table-column>
      <el-table-column label="项目编号" prop="projectNo"></el-table-column>
      <el-table-column label="项目名称" prop="projectDesc"></el-table-column>
      <el-table-column label="客户编码" prop="customerNo"></el-table-column>
      <el-table-column label="客户描述" prop="customerDesc"></el-table-column>
    </el-table>
    <el-pagination v-if="isPage" @size-change="handleSizeChange"
                   @current-change="handlePageChange"
                   :current-page="no"
                   :page-sizes="[20, 50, 100, 200, 500]"
                   :page-size="size"
                   :total="total"
                   layout="total,sizes, prev, pager, next, jumper">
    </el-pagination>
  </el-dialog>
</template>

<style scoped>

</style>