Merge branch 'master' of https://gitee.com/yuanchu_code/frontend-zhongtian-...

yuyu

2023-08-02 192a6c1536d3f9017343634c17dc300c6fd98ff6

 src/components/view/technical.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,265 @@

<style scoped>
  .technical{
    height: 100%;
    width: 100%;
  }
  .technical .title .el-button {
    height: 32px;
    border: 1px solid rgba(190, 190, 190, 0.44);
    box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
    padding: 0 12px;
  }

  .technical .title {
    margin-bottom: 10px;
    padding: 0 20px;
  }

/* æœç´¢å¤´éƒ¨æ ·å¼ */
.search-header{
  background: #fff;
  padding: 24px 32px;
}
.search-header .el-form-item{
  margin: 0px;
  font-size: 14px;
}
.search-header .el-form-item:nth-child(1){
  margin-right: 48px;
} 
.search-header .el-form-item:nth-child(2){
  margin-right: 24px;
} 
/* é‡ç½®å’ŒæŸ¥è¯¢ä¸¤ä¸ªæŒ‰é’®æ ·å¼ */
.search-header .el-form-item .el-button{
width: 65px;
height: 32px;
box-sizing: border-box;
background: rgb(255, 255, 255);
border: 1px solid rgb(217, 217, 217);
border-radius:2px;
padding: 0;
font-size: 14px;
}
.search-header .el-form-item .el-button:nth-child(2){
/* Rectangle 77 */
background: rgb(0, 78, 162);
color: #fff;
}
/* è¾“入框的样式 */
>>>.search-header .el-form-item .el-input .el-input__inner{
width: 224px;
height: 32px ;
box-sizing: border-box;
background: rgb(255, 255, 255);
border: 1px solid rgb(217, 217, 217);
border-radius:2px;
}


/* æŠ€æœ¯æ–‡ä»¶è¡¨æ ¼æ ·å¼ */
.technical-table{
  margin-top: 11px;
  height: calc(100% - 140px);
  background: #fff;
  padding: 23px 21px ;
  font-size: 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
/* .technical-table .el-table{
  overflow-y:scroll;
} */
.technical-table .table-box {
  flex: 1;
  overflow-y: scroll;
}
.technical-table .el-pagination{
  margin-top: 23px;
  display: flex;
  justify-content: end;
}
</style>


<template>
  <div class="technical">
    <div class="title">
      <el-row>
        <el-col :span="12">技术文件</el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button  icon="el-icon-plus">生成项目书</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="search-header">
      <el-form v-model="searchData" :inline="true">
        <el-form-item label="订单号:">
          <el-input v-model="searchData.number"></el-input>
        </el-form-item>
        <el-form-item label="下单日期:">
          <el-date-picker
            v-model="searchData.date"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
                <el-button  plain @click="resetBtn">重 ç½®</el-button>
                <el-button  @click="filteredTableData">查 è¯¢</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="technical-table">
      <div class="table-box">
        <el-table
          border style="width: 100%"
          :data="technicalTable"
          >
          <el-table-column
          type="selection"
          width="78">
        </el-table-column>
          <el-table-column
            prop="date"
            label="订单号"
            width="124">
          </el-table-column>
          <el-table-column
            prop="name"
            label="工程名称"
            width="160">
          </el-table-column>
          <el-table-column
            prop="address"
            label="产品编码"
            width="168"
            >
          </el-table-column>
          <el-table-column
            prop="name"
            label="产品大类"
            width="128">
          </el-table-column>
          <el-table-column
            prop="address"
            label="规格型号"
            width="170">
          </el-table-column>
          <el-table-column
            prop="name"
            label="单位"
            width="100">
          </el-table-column>
          <el-table-column
            prop="address"
            label="数量"
            width="118"
            >
          </el-table-column>
          <el-table-column
            prop="name"
            label="下单人"
            width="114">
          </el-table-column>
          <el-table-column
            prop="address"
            label="下单日期"
            width="153"
            >
          </el-table-column>
          <el-table-column
            prop="address"
            label="交货日期"
            width="137">
          </el-table-column>
          <el-table-column
            prop="address"
            label="状态"
            width="85"
            >
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="194">
              <template>
                <el-button type="text" size="small">查看详情</el-button>
                <el-button type="text" size="small">编辑附件</el-button>
              </template>
            </el-table-column>
      </el-table>
      </div>
      
      
    <el-pagination
      :current-page="1"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
       searchData:{
        number:'',
        date:''
       },
       technicalTable: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市'
          }
          ]
    }
  },
}
</script>