modified: src/components/view/carrierContract.vue modified: src/compo...

Fixiaobai

2023-10-12 13aed698b5e2fbb2b4b96ff27f1b706b740ae640

 src/components/view/carrierContract.vue

@@ -1,13 +1,102 @@
<template>
  <div>承运商合同管理</div>
  <div>
    <el-row style="width: 100%;display: flex; justify-content: space-around;margin-top: 10px;">
      <el-col>
        <p style="margin-left: 20px;">承运商合同管理</p>
      </el-col>
      <el-col style="display: flex; justify-content: end;">
        <el-button size="mini" icon="el-icon-plus" type="primary">新增</el-button>
        <el-button size="mini" icon="el-icon-edit-outline">修改</el-button>
        <el-button size="mini" icon="el-icon-delete">删除</el-button>
      </el-col>
    </el-row>
    <el-row style="width: 100%;height: 60px;background-color: white;display: flex;align-items: center;margin-top: 10px;">
      <el-form style="height: 60%;margin-left: 20px;" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="供应商名称:">
          <el-input size="small" v-model="formInline.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="签订时间:">
          <el-date-picker v-model="formInline.time" type="datetime" placeholder="选择签订时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" @click="resetForm('ruleForm')">重置</el-button>
          <el-button size="mini" type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row style="height: calc(100% - 125px);margin-top: 10px;background-color: white;">
      <el-col style="margin-top: 10px;width: 98%;margin-left: 10px;height: calc(100% - 64px);">
        <el-table ref="inspectionTable" height="100%" :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ border: '0px', background: '#f5f7fa', color: '#606266', boxShadow: 'inset 0 1px 0 #ebeef5', textAlign: 'center' }"
          :data="inspectionTable" style="width: 100%;">
          <el-table-column type="selection" width="50">
          </el-table-column>
          <el-table-column prop="order_number" label="序号" min-width="50" />
          <el-table-column prop="customer_name" label="是否为框架" min-width="100" />
          <el-table-column prop="project_name" label="合同签订时间" min-width="100" />
          <el-table-column prop="quality_traceability" label="承运商" min-width="110" />
          <el-table-column prop="material_code" label="合同金额" min-width="100" />
          <el-table-column prop="material" label="合同有效期" min-width="85" />
          <el-table-column prop="specifications_model" label="录入人" min-width="110" />
          <el-table-column prop="unit" label="录入时间" min-width="80" />
          <el-table-column label="操作" min-width="80">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="goToDetail(scope.row)">查看</el-button>
              <el-button type="text" size="small">打印</el-button>
              <el-button v-if="scope.row.result == null" type="text" size="small" @click="goUp(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <!-- 分页器 -->
      <el-col class="pagination">
        <el-pagination :current-page="pageParams.pageSize" :page-sizes="[10, 50, 100, 200]"
          :page-size="pageParams.countSize" layout="total, sizes, prev, pager, next, jumper" :total="pageParams.total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        name: null,
        time: null
      },
      pageParams: {
        pageSize: 0,
        countSize: 10,
        total: 10
      },
      inspectionTable: []
    }
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    onSubmit() {

    },
    handleSizeChange(val) {

    },
    handleCurrentChange(val) {

    }
  }
}
</script>

<style>

</style>
<style  scoped>
.pagination {
  width: 98%;
  margin-top: 5px;
  display: flex;
  justify-content: end;
}
</style>>