supply-front/src/views/sales_policy/components/Examine.vue

<template>
  <div class="app-container">
    <div class="descriptions">
      <el-row>
        <el-col :span="4">销售政策编号</el-col>
        <el-col :span="4">1</el-col>
        <el-col :span="4">销售政策说明</el-col>
        <el-col :span="4">1</el-col>
        <el-col :span="4">状态</el-col>
        <el-col :span="4">1</el-col>
      </el-row>
      <el-row>
        <el-col :span="4">销售政策类型</el-col>
        <el-col :span="4">1</el-col>
        <el-col :span="4">支付钱包</el-col>
        <el-col :span="4">1</el-col>
        <el-col :span="4">家用空调</el-col>
        <el-col :span="4">1</el-col>
      </el-row>
      <el-row>
        <el-col :span="4">备注</el-col>
        <el-col :span="20">1</el-col>
      </el-row>
      <el-row>
        <el-col :span="3">制单人</el-col>
        <el-col :span="3">1</el-col>
        <el-col :span="3">制单日期</el-col>
        <el-col :span="3">1</el-col>
        <el-col :span="3">生效日期</el-col>
        <el-col :span="3">1</el-col>
        <el-col :span="3">失败日期</el-col>
        <el-col :span="3">1</el-col>
      </el-row>
      <el-row>
        <el-col :span="3">审核人</el-col>
        <el-col :span="3">1</el-col>
        <el-col :span="3">审核日期</el-col>
        <el-col :span="3">1</el-col>
        <el-col :span="3">关闭人</el-col>
        <el-col :span="3">1</el-col>
        <el-col :span="3">关闭日期</el-col>
        <el-col :span="3">1</el-col>
      </el-row>
    </div>
    <div class="mymain-container">
      <el-row>
        <el-divider></el-divider>
        <el-row type="flex">
          <el-col :span="12">
            <h4 style="display: inline-block; margin-right: 20px">货品信息</h4>
            <el-button size="small">查看</el-button></el-col
          >
        </el-row>
        <el-divider></el-divider>
      </el-row>
      <el-table
        v-loading="listLoading"
        :data="dataList"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        stripe
      >
        <el-table-column
          fixed
          prop="num"
          label="序号"
          width="50"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="name" label="货品编码" align="center">
        </el-table-column>
        <el-table-column prop="province" label="货品名称" align="center">
        </el-table-column>
        <el-table-column prop="city" label="规格型号" align="center">
        </el-table-column>
        <el-table-column
          prop="address"
          label="销售类型编码"
          width="500"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="zip" label="销售类型" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="单价" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="支付钱包" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="备注" align="center">
        </el-table-column>
      </el-table>
      <el-row>
        <el-divider></el-divider>
        <el-row type="flex">
          <el-col :span="12">
            <h4 style="display: inline-block; margin-right: 20px">条件信息</h4>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </el-row>
      <el-table
        v-loading="listLoading"
        :data="dataList"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        stripe
      >
        <el-table-column
          fixed
          prop="num"
          label="序号"
          width="50"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="name" label="限定条件" align="center">
        </el-table-column>
        <el-table-column prop="province" label="限定机型" align="center">
        </el-table-column>
        <el-table-column prop="city" label="配体机型" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-divider></el-divider>
        <el-row type="flex">
          <el-col :span="12">
            <h4 style="display: inline-block; margin-right: 20px">
              经销商使用范围
            </h4>
            <el-button size="small">添加</el-button></el-col
          >
        </el-row>
        <el-divider></el-divider>
      </el-row>
      <el-table
        v-loading="listLoading"
        :data="dataList"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        stripe
      >
        <el-table-column
          fixed
          prop="num"
          label="序号"
          width="50"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="name" label="经销商编码" align="center">
        </el-table-column>
        <el-table-column prop="province" label="经销商名称" align="center">
        </el-table-column>

      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "examine",
  data() {
    return {
      input: "",

      ruleForm: {
        name: "",
      },
      listLoading: false,
      rules: {
        name: [
          { required: true, message: "", trigger: "click" },
          { min: 3, max: 5, message: "", trigger: "click" },
        ],
      },
      imageUrl: "",
      dataList: [
        {
          num: "2",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          num: "2",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          num: "2",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          num: "2",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          num: "2",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          num: "2",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          num: "2",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ],
      radio: "",
      options: {},
      value: "",
    };
  },
};
</script>

<style lang="scss" scoped>
.descriptions {
  // border: #EBEEF5;
  border: 1px solid #ebeef5;
  border-bottom: none;
  .el-row {
    height: 40px;
    line-height: 40px;
  }
  .el-col:nth-child(odd) {
    background-color: #ebeef5;
  }
  .el-col {
    padding: 0 15px;
    height: 100%;
    border-bottom: 1px solid #ebeef5;
  }
}
.el-divider--horizontal {
  margin: 20px 0;
}
</style>