Merge remote-tracking branch 'origin/master'

王震

2023-09-07 02ff4d3b3c4829e6f97a704c60fe76433e65c4e6

 src/components/view/technical.vue

@@ -1,3 +1,274 @@
<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.id"></el-input>
        </el-form-item>
        <el-form-item label="下单日期:">
          <el-date-picker
            v-model="searchData.date"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
                <el-button  plain @click="resetBtn">重 置</el-button>
                <el-button  @click="searchTechnical">查 询</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="order_number"
            label="订单号">
          </el-table-column>
          <el-table-column
            prop="saleman"
            label="业务员">
          </el-table-column>
          <el-table-column
            prop="proname"
            label="客户名称">
          </el-table-column>
          <el-table-column
            prop="name"
            label="产品名称">
          </el-table-column>
          <el-table-column
            prop="specifications"
            label="规格型号">
          </el-table-column>
          <el-table-column
            prop="unit"
            label="单位">
          </el-table-column>
          <el-table-column
            prop="number"
            label="数量">
          </el-table-column>
          <el-table-column
            prop="下单日期"
            label="下单日期">
          </el-table-column>
          <el-table-column
            prop="交货日期"
            label="交货日期">
          </el-table-column>
          <el-table-column
            prop="type"
            label="状态"
            width="85"
            >
            <template slot-scope="scope">
              {{scope.state==0?'待编制':'已编制'}}
            </template>
          </el-table-column>
          <el-table-column
              label="操作"
              width="194">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="showDetails(scope.row)">查看详情</el-button>
                <el-button type="text" size="small">编辑附件</el-button>
              </template>
            </el-table-column>
      </el-table>
      </div>
      
      
    <el-pagination
       @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageParams.pageNo"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="pageParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageParams.total">
    </el-pagination>
    <!-- 查看详情模态框 -->
    <el-dialog title="文件详情" class="detail-model" :visible.sync="showDetail" width="687px" @close="showDetail = false">
      <el-form label-position="right" label-width="70px" :model="selectedRow">
        <span class="formtitle">基本信息</span>
        <el-row :gutter="31">
          <el-col :span="12">
            <el-form-item label="订单号">
              <el-input :value="selectedRow.id" :readonly="true" style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工程名称">
              <el-input :value="selectedRow.proname" :readonly="true" style="height: 32px; width: 224px;"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="31">
          <el-col :span="12">
            <el-form-item label="产品编码">
              <el-input :value="selectedRow.code" :readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品大类">
              <el-input :value="selectedRow.type" :readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="31">
          <el-col :span="12">
            <el-form-item label="规格型号">
              <el-input :value="selectedRow.specifications" :readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位">
              <el-input :value="selectedRow.unit" :readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="31">
          <el-col :span="12">
            <el-form-item label="数量">
              <el-input :value="selectedRow.number" :readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下单人">
              <el-input :value="selectedRow.custname" :readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="31">
          <el-col :span="12">
            <el-form-item label="下单日期">
              <el-input :value="selectedRow.createTime" :readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交货日期">
              <el-input :value="selectedRow.deliveryTime" :readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="31">
          <el-col :span="12">
            <el-form-item label="状态">
              <el-input :value="selectedRow.state==1?'待编制':'已编制'" :readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <span class="formtitle">客户信息</span>
        <el-row :gutter="31">
          <el-col :span="12">
            <el-form-item label="客户名称">
              <el-input :value="selectedRow.proname" :readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="省份">
              <el-input :value="selectedRow.province" :readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="31">
          <el-col :span="12">
            <el-form-item label="事业部">
              <el-input :value="selectedRow.department" :readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务员">
              <el-input :value="selectedRow.salesman" :readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <span class="formtitle">附件信息</span>
        <el-row :gutter="31">
          <el-col :span="12">
            <span  style="height: 32px; width: 224px; color:rgb(0, 78, 162);">xxx项目书.docx</span>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  filters:{
    
  },
  data() {
    return {
       searchData:{
        id:'',
        date:''
       },
       technicalTable: [],
       showDetail: false,
       selectedRow: {},
       pageParams:{
        pageNo:1,
        pageSize:10,
        total:0
       }
    }
  },
  created() {
    this.getTechnicalTableData()
  },
  methods: {
      async showDetails(row){
        this.showDetail = true
        const res = await this.$axios.get(this.$api.url.selectOrderById,{params:{id:row.id}})
        this.selectedRow = res.data
        console.log(this.selectedRow)
      },
      async  getTechnicalTableData() {
        const res = await this.$axios.get(this.$api.url.selectAllOrder,{
          params:{
            pageSize:(this.pageParams.pageNo-1),
            countSize:this.pageParams.pageSize,...this.searchData}})
        this.technicalTable = res.data.row
        this.pageParams.total = res.data.total
      },
      // 头部条件查询-重置
      resetBtn() {
        this.searchData={}
      },
      // 头部条件查询-查询
      searchTechnical() {
        this.getTechnicalTableData()
      },
      handleSizeChange(value){
        this.pageParams.pageSize = value
        this.getTechnicalTableData()
      },
      handleCurrentChange(value){
        this.pageParams.pageNo = value
        this.getTechnicalTableData()
      }
    },
}
</script>

<style scoped>
  .technical{
@@ -48,7 +319,7 @@
color: #fff;
}
/* 输入框的样式 */
.search-header .el-form-item .el-input .el-input__inner{
.search-header .el-form-item .el-input >>>.el-input__inner{
width: 224px;
height: 32px ;
box-sizing: border-box;
@@ -86,297 +357,16 @@
  margin-bottom: 24px;
  font-size: 16px;
}
.detail-model >>>.el-form-item__label{
  color: rgb(51, 51, 51);
}
.detail-model >>>.el-input__inner{
width: 224px;
height: 32px;
box-sizing: border-box;
background: rgb(238, 238, 238);
border: 1px solid rgb(221, 221, 221);
border-radius:4px;
}
</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 slot-scope="scope">
                <el-button type="text" size="small" @click="showDetails(scope.row)">查看详情</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>
    <!-- 查看详情模态框 -->
    <el-dialog title="文件详情" :visible.sync="showDetail" width="687px" @close="showDetail = false">
      <el-form label-position="right" label-width="70px" :model="selectedRow">
        <span class="formtitle">基本信息</span>
        <el-row :gutter="31">
          <el-col :span="12">
            <el-form-item label="订单号">
              <el-input :value="selectedRow.date" readonly="true" style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工程名称">
              <el-input :value="selectedRow.date" readonly="true" style="height: 32px; width: 224px;"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="31">
          <el-col :span="12">
            <el-form-item label="产品编码">
              <el-input :value="selectedRow.date" readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品大类">
              <el-input :value="selectedRow.date" readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="31">
          <el-col :span="12">
            <el-form-item label="规格型号">
              <el-input :value="selectedRow.date" readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位">
              <el-input :value="selectedRow.date" readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="31">
          <el-col :span="12">
            <el-form-item label="数量">
              <el-input :value="selectedRow.date" readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下单人">
              <el-input :value="selectedRow.date" readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="31">
          <el-col :span="12">
            <el-form-item label="下单日期">
              <el-input :value="selectedRow.date" readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交货日期">
              <el-input :value="selectedRow.date" readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="31">
          <el-col :span="12">
            <el-form-item label="状态">
              <el-input :value="selectedRow.date" readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <span class="formtitle">客户信息</span>
        <el-row :gutter="31">
          <el-col :span="12">
            <el-form-item label="客户名称">
              <el-input :value="selectedRow.date" readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="省份">
              <el-input :value="selectedRow.date" readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="31">
          <el-col :span="12">
            <el-form-item label="事业部">
              <el-input :value="selectedRow.date" readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务员">
              <el-input :value="selectedRow.date" readonly="true"  style="height: 32px; width: 224px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <span class="formtitle">附件信息</span>
        <el-row :gutter="31">
          <el-col :span="12">
            <span  style="height: 32px; width: 224px; color:rgb(0, 78, 162);">xxx项目书.docx</span>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    </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: '上海市'
          }
          ],
          showDetail: false,
          selectedRow: ''
    }
  },
  methods: {
      showDetails(row){
        this.showDetail = true
        this.selectedRow = row
      }
    },
}
</script>