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

<template>
  <el-container :direction="vertical">
    <el-header height="" class="pdt">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        size="small"
        label-position="left"
        class="demo-ruleForm"
      >
        <el-row type="flex">
          <el-col :span="9">
            <el-form-item label="销售政策编号" prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="如未填写，则系统自动生成"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item label="销售政策说明" prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="销售政策说明"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="9">
            <el-form-item label="销售政策类型" prop="name">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="部门" prop="name">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="表头备注" prop="name">
            <el-input
              v-model="ruleForm.name"
              placeholder="新风机变频挂机。按提货数量1:3开单"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="9">
            <el-form-item label="制单人" prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="新风机变频挂机。按提货数量1:3开单"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="制单日期" prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="2020-01-23"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-main>
      <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="经销商编码"
          width="300"
          align="center"
        >
          <template slot-scope="scope">
            <el-input
              v-model="input"
              placeholder=""
              size="normal"
              clearable
              @change=""
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="province"
          label="经销商名称"
          width="300"
          align="center"
        >
          <template slot-scope="scope">
            <el-input
              v-model="input"
              placeholder=""
              size="normal"
              clearable
              @change=""
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="city"
          label="最多提货套数"
          width="300"
          align="center"
        >
          <template slot-scope="scope">
            <el-input
              v-model="input"
              placeholder=""
              size="normal"
              clearable
              @change=""
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="表体备注"
          width="300"
          align="center"
        >
          <template slot-scope="scope">
            <el-input
              v-model="input"
              placeholder=""
              size="normal"
              clearable
              @change=""
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="zip"
          label="最近订货时间"
          width="300"
          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-main>
    <el-footer>
      <el-row>
        <el-col :span="12">
          <el-button type="primary" size="default" @click="">保存</el-button>
          <el-button type="primary" size="default" @click="">重置</el-button>
        </el-col>
        <el-col :span="12" class="text_right">
          <el-button type="primary" size="default" @click="">添加</el-button>
          <el-button type="primary" size="default" @click="">删除</el-button>
        </el-col>
      </el-row>
      <!-- <Pagination /> -->
    </el-footer>
  </el-container>
</template>

<script>
import Pagination from "./Pagination";
import Transfer from "./Transfer";
export default {
  data() {
    return {
      input: "",

      ruleForm: {
        name: "",
      },
      listLoading: false,
      rules: {
        name: [
          { required: true, message: "", trigger: "click" },
          { min: 3, max: 5, message: "", trigger: "click" },
        ],
      },

      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: "",
    };
  },

  methods: {
    handelLeftCheck(e) {
      console.log(e);
    },
  },
  components: {
    Transfer,
    Pagination,
  },
};
</script>

<style lang="scss" scoped>
.pdt {
  padding-top: 20px;
}

.text_right {
  text-align: right;
}
</style>