完成政策管理页面

src/components/Sales/AddCondition.vue

@@ -1,15 +0,0 @@
-<template>
-    <div>
-对应经销商列表
-    </div>
-</template>
-
-<script>
-    export default {
-        
-    }
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/components/Sales/AddModel.vue

@@ -1,15 +0,0 @@
-<template>
-    <div>
-对应经销商列表
-    </div>
-</template>
-
-<script>
-    export default {
-        
-    }
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/components/Sales/Pagination.vue

@@ -1,18 +0,0 @@
-<template>
-  <el-row type="flex" align="middle" class="pd">
-    <el-col>显示第 1 到第 10 条记录，总共 10条记录</el-col>
-    <el-col :offset="12">
-      <el-pagination layout="prev, pager, next" :total="50">
-      </el-pagination>
-    </el-col>
-  </el-row>
-</template>
-
-<style lang="scss">
-.pd{
-    margin: 20px 0;
-}
-    .el-pagination {
-  text-align: right;
-}
-</style>

src/views/sales_policy/codealer_list.vue

@@ -1,9 +1,149 @@
 <template>
-  <div>对应经销商列表</div>
+  <el-container v-if="isShow">
+    <el-header height="100%" class="mg">
+      <el-row>
+        <el-col :span="6">
+          <el-input
+            v-model="input"
+            placeholder="销售政策编号"
+            size="normal"
+            clearable
+            @change=""
+          ></el-input>
+        </el-col>
+        <el-col :span="6" :push="1">
+          <el-input
+            v-model="input"
+            placeholder="销售政策说明"
+            size="normal"
+            clearable
+            @change=""
+          ></el-input>
+        </el-col>
+        <el-col :span="6" :push="2">
+          <el-input
+            v-model="input"
+            placeholder="表头备注"
+            size="normal"
+            clearable
+            @change=""
+          ></el-input>
+        </el-col>
+        <!-- <el-col :span="6" class="btn">
+
+        </el-col> -->
+      </el-row>
+      <el-row class="mg">
+        <el-button type="primary" size="default" @click="">查询</el-button>
+        <el-button type="primary" size="default" @click="">重置</el-button>
+        <el-button type="primary" size="default" @click="">导出</el-button>
+      </el-row>
+    </el-header>
+    <el-main>
+      <el-table :data="tableData" border style="width: 100%">
+        <el-table-column prop="name" label="操作" width="120" align="center">
+        </el-table-column>
+        <el-table-column
+          prop="province"
+          label="状态"
+          width="120"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="city"
+          label="销售政策编号"
+          width="150"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="address"
+          label="销售政策说明"
+          width="400"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column prop="zip" label="表头备注" width="200" align="center">
+        </el-table-column>
+        <el-table-column
+          prop="zip"
+          label="关联经销商"
+          width="150"
+          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-main>
+    <Pagination />
+  </el-container>
+  <Distributor v-else/>
 </template>
 
 <script>
-export default {};
+import Pagination from "./components/Pagination";
+import Distributor from './components/Distributor'
+export default {
+  data() {
+    return {
+      isShow:false,
+      input: "",
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1517 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1519 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1516 弄",
+          zip: 200333,
+        },
+      ],
+    };
+  },
+  components: {
+    Pagination,
+    Distributor
+  },
+};
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.mg {
+  margin: 20px 0;
+}
+.btn {
+  text-align: right;
+}
+</style>

src/views/sales_policy/components/AddCondition.vue

@@ -0,0 +1,171 @@
+<template>
+  <el-container>
+    <el-header class="header">
+      <el-divider></el-divider>
+      <h4>限定条件</h4>
+      <el-divider></el-divider>
+    </el-header>
+    <el-main>
+      <el-row>
+        <el-row :gutter="50">
+          <el-col :xs="24" :sm="12" :lg="12" class="mgb">
+            <el-row>
+              <el-row class="pdt">
+                <el-button
+                  type="primary"
+                  size="default"
+                  @click="centerDialogVisible = true"
+                  >添加机型</el-button
+                >
+
+                <el-button type="primary" size="default" @click=""
+                  >删除机型</el-button
+                >
+              </el-row>
+              <el-row>
+                <el-table style="width: 100%" :data="tableData" border>
+                  <el-table-column type="selection" width="55" align="center">
+                  </el-table-column>
+                  <el-table-column label="日期" width="120" align="center">
+                    <template slot-scope="scope">{{ scope.row.date }}</template>
+                  </el-table-column>
+                  <el-table-column prop="name" label="姓名" align="center">
+                  </el-table-column>
+                </el-table>
+              </el-row>
+            </el-row>
+          </el-col>
+          <el-col :xs="24" :sm="12" :lg="12" class="mgb">
+            <el-row>
+              <el-row class="pdt">
+                <el-button type="primary" size="default" @click=""
+                  >添加机型</el-button
+                >
+                <el-button type="primary" size="default" @click=""
+                  >删除机型</el-button
+                >
+              </el-row>
+              <el-row>
+                <el-table style="width: 100%" :data="tableData" border>
+                  <el-table-column type="selection" width="55" align="center">
+                  </el-table-column>
+                  <el-table-column label="日期" width="120" align="center">
+                    <template slot-scope="scope">{{ scope.row.date }}</template>
+                  </el-table-column>
+                  <el-table-column prop="name" label="姓名" align="center">
+                  </el-table-column>
+                </el-table>
+              </el-row>
+            </el-row>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :xs="24" :sm="4" :lg="4" class="mgb">配置比例设置</el-col>
+          <el-col :xs="24" :sm="4" :lg="4" class="mgb">限定机型</el-col>
+          <el-col :xs="24" :sm="6" :lg="4" class="mgb">
+            <input type="text" :value="1"
+          /></el-col>
+          <el-col :xs="24" :sm="4" :lg="4" class="mgb">配提比例</el-col>
+          <el-col :xs="24" :sm="4" :lg="4" class="mgb">
+            <input type="text" :value="1"
+          /></el-col>
+          <el-col class="text_rihgt" v-if="false">
+            <el-button type="primary" size="default" @click=""
+              >添加限定条件</el-button
+            ></el-col
+          >
+        </el-row>
+        <el-divider></el-divider>
+      </el-row>
+    </el-main>
+    <el-footer height="100px">
+      <el-button type="primary" size="default" @click="">保存</el-button>
+      <el-button type="primary" size="default" @click="">重置</el-button>
+    </el-footer>
+    <AddModel :centerDialogVisible="centerDialogVisible" />
+  </el-container>
+</template>
+
+<script>
+import AddModel from "./AddModel";
+export default {
+  data() {
+    return {
+      centerDialogVisible: false,
+      tableData: [
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-08",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-06",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+      ],
+      multipleSelection: [],
+    };
+  },
+  methods: {
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach((row) => {
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+  },
+  components: {
+    AddModel,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.mgb {
+  margin-bottom: 20px;
+}
+.pdt {
+  padding-bottom: 20px;
+}
+.text_rihgt {
+  text-align: right;
+}
+.header {
+  margin-bottom: 40px;
+}
+.el-main {
+  overflow: hidden;
+}
+</style>

src/views/sales_policy/components/AddModel.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-dialog
+    :visible.sync="centerDialogVisible"
+    width="70%"
+    center
+  >
+    <div>
+      <TabelTransfer />
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="centerDialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="centerDialogVisible = false"
+        >确 定</el-button
+      >
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import TabelTransfer from "./TabelTransfer.vue";
+export default {
+  data() {
+    return {};
+  },
+  props: {
+    centerDialogVisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    TabelTransfer,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .el-dialog{
+    overflow: hidden;
+  }
+</style>

src/components/Sales/AddPolicy.vue → src/views/sales_policy/components/AddPolicy.vue

@@ -8,6 +8,7 @@
         :rules="rules"
         ref="ruleForm"
         label-width="120px"
+         size="small" label-position="left"
         class="demo-ruleForm"
       >
         <el-row type="flex">
@@ -112,7 +113,7 @@
         </el-row>
       </el-form>
     </el-header>
-    <el-main height="">
+    <el-main>
       <el-row>
         <el-divider></el-divider>
         <el-row type="flex" align="middle">
@@ -180,8 +181,8 @@
           </template>
         </el-table-column>
       </el-table>
-      <Pagination />
     </el-main>
+    <Pagination />
     <el-footer height="" class="footer">
       <el-row>
         <el-divider></el-divider>
@@ -198,79 +199,19 @@
         <el-radio v-model="radio" label="1">地区</el-radio>
         <el-radio v-model="radio" label="2">指定</el-radio>
       </el-row>
-      <!-- justify="center" -->
-      <el-row type="flex">
-        <el-col>
-          <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-col>
-        <el-col><el-button>确定</el-button></el-col>
-      </el-row>
-      <el-row type="flex" align="moddle" class="transfer">
-        <e-col class="left_box">
-          <h4 class="transfer_title">可选经销商</h4>
-          <el-checkbox-group
-            v-model="leftData"
-            class="left_box_flex"
-            @change="handelLeftCheck"
-          >
-            <el-checkbox label="复选框 A"></el-checkbox>
-            <el-checkbox label="复选框 B"></el-checkbox>
-            <el-checkbox label="复选框 C"></el-checkbox>
-          </el-checkbox-group>
-        </e-col>
-        <e-col class="middle_box">
-          <el-row>
-            <el-col>
-              <el-button :disabled="isDisabled">全部添加</el-button></el-col
-            >
-            <el-col> <el-button :disabled="isDisabled">增加</el-button></el-col>
-            <el-col> <el-button :disabled="isDisabled">删除</el-button></el-col>
-            <el-col>
-              <el-button :disabled="isDisabled">全部删除</el-button></el-col
-            >
-          </el-row>
-        </e-col>
-        <e-col class="right_box">
-          <h4 class="transfer_title">已选经销商</h4>
-          <el-checkbox-group v-model="rightData" class="right_box_flex">
-            <el-checkbox label="复选框 A"></el-checkbox>
-            <el-checkbox label="复选框 B"></el-checkbox>
-            <el-checkbox label="复选框 C"></el-checkbox>
-          </el-checkbox-group>
-        </e-col>
-      </el-row>
+      <Transfer/>
     </el-footer>
   </el-container>
 </template>
 
 <script>
-import Pagination from "@/components/Sales/Pagination";
+import Pagination from "./Pagination";
+import Transfer from "./Transfer";
 export default {
   data() {
-    const generateData = (_) => {
-      const data = [];
-      for (let i = 1; i <= 15; i++) {
-        data.push({
-          value: i,
-          desc: `备选项 ${i}`,
-          disabled: i % 4 === 0,
-        });
-      }
-      return data;
-    };
     return {
       input: "",
 
-      transferData: generateData(),
-      transfer: [],
       ruleForm: {
         name: "",
       },
@@ -281,29 +222,7 @@ export default {
           { min: 3, max: 5, message: "", trigger: "click" },
         ],
       },
-      options: [
-        {
-          value: "选项1",
-          label: "黄金糕",
-        },
-        {
-          value: "选项2",
-          label: "双皮奶",
-        },
-        {
-          value: "选项3",
-          label: "蚵仔煎",
-        },
-        {
-          value: "选项4",
-          label: "龙须面",
-        },
-        {
-          value: "选项5",
-          label: "北京烤鸭",
-        },
-      ],
-      value: "",
+
       dataList: [
         {
           num: "2",
@@ -363,21 +282,16 @@ export default {
         },
       ],
       radio: "",
-      leftData: [],
-      rightData: [],
     };
   },
-  computed: {
-    isDisabled() {
-      return !(this.leftData.length ||  this.rightData.length)
-    },
-  },
+
   methods: {
     handelLeftCheck(e) {
       console.log(e);
     },
   },
   components: {
+    Transfer,
     Pagination,
   },
 };
@@ -400,51 +314,11 @@ h4 {
 .el-container .el-divider--horizontal {
   margin: 10px;
 }
-::v-deep .el-form-item__label {
-  // text-align: left;
-}
+
 .el-select {
   width: 100%;
 }
-// 穿梭框
-.transfer {
-  margin: 20px 0;
-  &_title {
-    margin: 20px 20px 0 20px;
-  }
-  .left_box {
-    width: 430px;
-    height: 450px;
-    border: 1px solid #eee;
-    &_flex {
-      display: flex;
-      flex-direction: column;
-      margin: 20px;
-      .el-checkbox {
-        padding: 10px 0;
-      }
-    }
-  }
-  .right_box {
-    width: 430px;
-    height: 450px;
-    border: 1px solid #eee;
-    &_flex {
-      display: flex;
-      flex-direction: column;
-      margin: 20px;
-      .el-checkbox {
-        padding: 10px 0;
-      }
-    }
-  }
-  .middle_box {
-    text-align: center;
-  }
-  .el-row .el-col {
-    margin: 20px 0;
-  }
-}
+
 .footer {
   margin-bottom: 20px;
 }

src/views/sales_policy/components/Distributor.vue

@@ -0,0 +1,299 @@
+<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>

src/views/sales_policy/components/NewInfo.vue

@@ -0,0 +1,271 @@
+<template>
+  <el-container :direction="vertical">
+    <el-header height="" class="pdt">
+      <h4>销售政策信息</h4>
+      <el-divider></el-divider>
+      <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="8">
+            <el-form-item label="营销活动" prop="name">
+              <el-input
+                v-model="ruleForm.name"
+                placeholder="如未填写，则系统自动生成"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="营销活动标题" prop="name">
+              <el-input
+                v-model="ruleForm.name"
+                placeholder="销售政策说明"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="部门" prop="name">
+              <el-input
+                v-model="ruleForm.name"
+                placeholder="家用空调"
+              ></el-input>
+            </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-form-item label="政策封面图">
+            <el-upload
+              class="avatar-uploader"
+              action="https://jsonplaceholder.typicode.com/posts/"
+              :show-file-list="false"
+              :on-success="handleAvatarSuccess"
+              :before-upload="beforeAvatarUpload"
+            >
+              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+          </el-form-item>
+        </el-row>
+
+        <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="9">
+            <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-input
+                v-model="ruleForm.name"
+                placeholder=""
+              ></el-input> </el-form-item
+          ></el-col>
+          <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-row>
+      </el-form>
+    </el-header>
+    <el-main>
+      <el-row>
+        <el-divider></el-divider>
+        <el-row type="flex" align="middle">
+          <el-col :span="2">
+            <h4>货品信息</h4>
+          </el-col>
+        </el-row>
+        <el-divider></el-divider>
+      </el-row>
+
+      <Transfer>
+        <template #header>
+          <el-row :gutter="20">
+            <el-col :span="8" :offset="0">
+              <el-input
+                v-model="input"
+                placeholder=""
+                size="normal"
+                clearable
+                @change=""
+              ></el-input>
+            </el-col>
+            <el-col :span="8" :offset="0">
+              <el-input
+                v-model="input"
+                placeholder=""
+                size="normal"
+                clearable
+                @change=""
+              ></el-input>
+            </el-col>
+            <el-col :span="8">
+              <el-button type="primary" size="default" @click=""
+                >确定</el-button
+              >
+              <el-button type="primary" size="default" @click=""
+                >重置</el-button
+              >
+            </el-col>
+          </el-row>
+        </template>
+        <template #footer>
+          <el-row>
+            <el-button type="primary" size="default" @click="">保存</el-button>
+
+            <el-button type="primary" size="default" @click="">重置</el-button>
+          </el-row>
+        </template>
+      </Transfer>
+    </el-main>
+
+    <el-footer height="" class="footer"> </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>
+h4 {
+  margin: 0;
+}
+.pdt {
+  padding-top: 20px;
+}
+
+.radio {
+  padding: 20px 0;
+}
+.el-divider--horizontal {
+  margin: 20px 0;
+}
+.el-container .el-divider--horizontal {
+  margin: 10px;
+}
+
+.el-select {
+  width: 100%;
+}
+
+.footer {
+  margin-bottom: 20px;
+}
+</style>

src/views/sales_policy/components/Pagination.vue

@@ -0,0 +1,51 @@
+<template>
+ <div class="pagination clearfix pd">
+      <div class="fr">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[10, 20, 30, 50]"
+          :page-size="10"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="listTotal">
+        </el-pagination>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    isOpen: false, // 是否展开条件筛选
+      currentPage: 1, // 当前页码
+      pageSize: 10, // 每页数量
+      listTotal: 0, // 列表总数
+      dataList: null, // 列表数据
+    }
+  },
+  methods: {
+      // 更改每页数量
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.currentPage = 1;
+      this.getList();
+    },
+    // 更改当前页
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.getList();
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.pd{
+    margin: 0 20px 20px 0;
+}
+    .el-pagination {
+  text-align: right;
+}
+</style>

src/views/sales_policy/components/TabelTransfer.vue

@@ -0,0 +1,327 @@
+<template>
+  <el-container :direction="vertical">
+    <el-header height="">
+      <el-row :gutter="20">
+        <el-col :span="8" :offset="0">
+          <el-input
+            v-model="input"
+            placeholder="产品编码"
+            size="normal"
+            clearable
+            @change=""
+          ></el-input>
+        </el-col>
+        <el-col :span="8" :offset="0">
+          <el-input
+            v-model="input"
+            placeholder="产品名称"
+            size="normal"
+            clearable
+            @change=""
+          ></el-input>
+        </el-col>
+        <el-col :span="8" :offset="0">
+          <el-input
+            v-model="input"
+            placeholder="产品型号"
+            size="normal"
+            clearable
+            @change=""
+          ></el-input>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="pdt">
+        <el-col :span="8" :offset="0">
+          <el-date-picker
+            v-model="value1"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          >
+          </el-date-picker
+        ></el-col>
+      </el-row>
+      <el-row :gutter="20" class="query">
+        <el-button type="primary" class="query_btn" size="default" @click=""
+          >查询</el-button
+        >
+      </el-row>
+    </el-header>
+    <el-main height="">
+      <el-row>
+        <el-row :gutter="50">
+          <el-col :span="10">
+            <el-row>
+              <el-row> </el-row>
+              <el-row>
+                <el-row class="title"> 可选产品列表 </el-row>
+
+                <el-table style="width: 100%" :data="tableData" border>
+                  <el-table-column type="selection" width="55" align="center">
+                  </el-table-column>
+                  <el-table-column label="日期" width="120" align="center">
+                    <template slot-scope="scope">{{ scope.row.date }}</template>
+                  </el-table-column>
+                  <el-table-column prop="name" label="姓名" align="center">
+                  </el-table-column>
+                </el-table>
+                <el-row class="mg">
+                     <Pagination/>
+                </el-row>
+              </el-row>
+            </el-row>
+          </el-col>
+          <el-col :span="4" class="middle">
+            <el-row :gutter="20" justify="center" align="middle">
+              <el-row class="btn">
+                <el-button type="primary" size="default" @click=""
+                  >全部添加</el-button
+                >
+              </el-row>
+              <el-row class="btn">
+                <el-button type="primary" size="default" @click=""
+                  >增加</el-button
+                >
+              </el-row>
+              <el-row class="btn">
+                <el-button type="primary" size="default" @click=""
+                  >删除</el-button
+                ></el-row
+              >
+              <el-row class="btn"
+                ><el-button type="primary" size="default" @click=""
+                  >全部删除</el-button
+                ></el-row
+              >
+            </el-row>
+          </el-col>
+          <el-col :span="10">
+            <el-row>
+              <el-row> </el-row>
+              <el-row>
+                <el-row class="title"> 已选产品列表 </el-row>
+                <el-table style="width: 100%" :data="tableData" border>
+                  <el-table-column type="selection" width="55" align="center">
+                  </el-table-column>
+                  <el-table-column label="日期" width="120" align="center">
+                    <template slot-scope="scope">{{ scope.row.date }}</template>
+                  </el-table-column>
+                  <el-table-column prop="name" label="姓名" align="center">
+                  </el-table-column>
+                </el-table>
+                   <el-row class="mg">
+                     <Pagination/>
+                </el-row>
+              </el-row>
+            </el-row>
+          </el-col>
+        </el-row>
+      </el-row>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import Pagination from "./Pagination";
+export default {
+  data() {
+    return {
+      input: "",
+      leftData: [],
+      rightData: [],
+      centerDialogVisible: false,
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      tableData: [
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-08",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-06",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+      ],
+      leftData: [],
+      dataL: [1, 3, 2],
+      dataR: [],
+      rightData: [],
+      multipleSelection: [],
+    };
+  },
+  methods: {
+    handelLeftCheck(e) {
+      console.log(e);
+    },
+    handelLeftCheck(direction) {},
+    //添加全部数据
+    handleAllData(direction) {
+      if (direction === "left") {
+        if (!this.dataL.length) return;
+        this.dataR = [...this.dataR, ...this.dataL];
+        this.dataL = [];
+        this.leftData = [];
+      } else {
+        if (!this.dataR.length) return;
+        this.dataL = [...this.dataL, ...this.dataR];
+        this.dataR = [];
+        this.rightData = [];
+      }
+    },
+    //添加部分或单个数据
+    handlePartData(direction) {
+      if (direction === "left") {
+        if (!this.dataL.length) return;
+        this.dataR = [...this.dataR, ...this.leftData];
+        this.dataL.forEach((k, d) => {
+          this.leftData.forEach((e) => {
+            if (e == k) {
+              this.dataL.splice(d, 1);
+              this.leftData = [];
+              return;
+            }
+          });
+        });
+      } else {
+        if (!this.dataL.length) return;
+        this.dataL = [...this.dataL, ...this.rightData];
+        this.dataR.forEach((k, d) => {
+          this.rightData.forEach((e) => {
+            if (e == k) {
+              this.dataR.splice(d, 1);
+              this.rightData = [];
+              return;
+            }
+          });
+        });
+      }
+    },
+    //删除全部数据
+    handleAllDelete(direction) {
+      if (direction === "left") {
+        if (!this.dataL.length) return;
+        this.dataL = [];
+        this.leftData = [];
+      } else {
+        if (!this.dataR.length) return;
+        this.dataR = [];
+        this.rightData = [];
+      }
+    },
+    //删除部分或单个数据
+    handlePartDelete(direction) {
+      if (direction === "left") {
+        this.dataL.forEach((k, d) => {
+          this.leftData.forEach((e) => {
+            if (e == k) {
+              this.dataL.splice(d, 1);
+              this.leftData = [];
+              return;
+            }
+          });
+        });
+      } else {
+        this.dataR.forEach((k, d) => {
+          this.rightData.forEach((e) => {
+            if (e == k) {
+              this.dataR.splice(d, 1);
+              this.rightData = [];
+              return;
+            }
+          });
+        });
+      }
+    },
+    // 判断能操作那边框
+    handleJudge(type) {
+      if (this.leftDisabled) {
+        // 左边框功能操作
+        this.hanleType(type, "left");
+      } else {
+        // 右边框功能操作
+        this.hanleType(type, "right");
+      }
+    },
+    // 获取事件类型
+    hanleType(type, direction) {
+      switch (type) {
+        case "AddAll":
+          this.handleAllData(direction);
+          break;
+        case "AddPart":
+          this.handlePartData(direction);
+          break;
+        case "DeleteAll":
+          this.handleAllDelete(direction);
+          break;
+        case "DeletePart":
+          this.handlePartDelete(direction);
+          break;
+      }
+    },
+  },
+  components:{
+    Pagination
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.btn {
+  margin: 20px 0;
+  text-align: center;
+}
+.query_btn {
+  margin-left: 0;
+}
+.mg{
+  margin: 20px;
+}
+.pdt {
+  margin: 20px 0;
+}
+.el-main {
+  overflow: hidden;
+}
+.middle {
+  height: 430px;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+}
+.title {
+  padding: 10px 0;
+  text-align: center;
+  border-left: 1px solid #ebeef5;
+  border-right: 1px solid #ebeef5;
+  border-top: 1px solid #ebeef5;
+}
+</style>

src/views/sales_policy/components/Transfer.vue

@@ -0,0 +1,303 @@
+<template>
+  <div>
+    <slot name="header">
+      <el-row type="flex">
+        <el-col>
+          <el-select v-model="value" class="select_height" placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-col>
+        <el-col><el-button>确定</el-button></el-col>
+      </el-row>
+    </slot>
+    <div>
+      <el-row type="flex" align="moddle" class="transfer">
+        <el-col class="left_box" :span="9">
+          <h4 class="transfer_title">可选经销商</h4>
+          <el-checkbox-group
+            v-model="leftData"
+            class="left_box_flex"
+            @change="handelLeftCheck"
+          >
+            <el-checkbox
+              v-for="(item, index) in dataL"
+              :key="index"
+              :label="item"
+              :disabled="rightDisabled"
+            ></el-checkbox>
+          </el-checkbox-group>
+        </el-col>
+        <el-col class="middle_box" :span="6">
+          <el-row>
+            <el-col>
+              <el-button :disabled="isDisabled" @click="handleJudge('AddAll')"
+                >全部添加</el-button
+              ></el-col
+            >
+            <el-col>
+              <el-button :disabled="isDisabled" @click="handleJudge('AddPart')"
+                >增加</el-button
+              ></el-col
+            >
+            <el-col>
+              <el-button
+                :disabled="isDisabled"
+                @click="handleJudge('DeletePart')"
+                >删除</el-button
+              ></el-col
+            >
+            <el-col>
+              <el-button
+                :disabled="isDisabled"
+                @click="handleJudge('DeleteAll')"
+                >全部删除</el-button
+              ></el-col
+            >
+          </el-row>
+        </el-col>
+        <el-col class="right_box" :span="9">
+          <h4 class="transfer_title">已选经销商</h4>
+          <el-checkbox-group v-model="rightData" class="right_box_flex">
+            <el-checkbox
+              v-for="(item, index) in dataR"
+              :key="index"
+              :label="item"
+              :disabled="leftDisabled"
+            ></el-checkbox>
+          </el-checkbox-group>
+        </el-col>
+      </el-row>
+    </div>
+
+    <slot name="footer">
+      <el-row>
+        <el-button type="primary" size="default" @click="">保存</el-button>
+        <el-button type="primary" size="default" @click="">提交审核</el-button>
+        <el-button type="primary" size="default" @click="">重置</el-button>
+      </el-row>
+    </slot>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      leftData: [],
+      dataL: [1, 3, 2],
+      dataR: [],
+      rightData: [],
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
+      value: "",
+    };
+  },
+  computed: {
+    /**
+     * @return(bool)  isDisabled
+     *  禁用功能按钮
+     */
+    isDisabled() {
+      return !(this.leftData.length || this.rightData.length);
+    },
+    /**
+     * @return(bool)  leftDisabled
+     *  禁用左边框选择
+     */
+    leftDisabled() {
+      return this.leftData.some((i) => i !== "");
+    },
+    /**
+     * @return(bool)  rightDisabled
+     *  禁用右边框选择
+     */
+    rightDisabled() {
+      return this.rightData.some((i) => i !== "");
+    },
+  },
+  methods: {
+    handelLeftCheck(direction) {},
+    //添加全部数据
+    handleAllData(direction) {
+      if (direction === "left") {
+        if (!this.dataL.length) return;
+        this.dataR = [...this.dataR, ...this.dataL];
+        this.dataL = [];
+        this.leftData = [];
+      } else {
+        if (!this.dataR.length) return;
+        this.dataL = [...this.dataL, ...this.dataR];
+        this.dataR = [];
+        this.rightData = [];
+      }
+    },
+    //添加部分或单个数据
+    handlePartData(direction) {
+      if (direction === "left") {
+        if (!this.dataL.length) return;
+        this.dataR = [...this.dataR, ...this.leftData];
+        this.dataL.forEach((k, d) => {
+          this.leftData.forEach((e) => {
+            if (e == k) {
+              this.dataL.splice(d, 1);
+              this.leftData = [];
+              return;
+            }
+          });
+        });
+      } else {
+        if (!this.dataL.length) return;
+        this.dataL = [...this.dataL, ...this.rightData];
+        this.dataR.forEach((k, d) => {
+          this.rightData.forEach((e) => {
+            if (e == k) {
+              this.dataR.splice(d, 1);
+              this.rightData = [];
+              return;
+            }
+          });
+        });
+      }
+    },
+    //删除全部数据
+    handleAllDelete(direction) {
+      if (direction === "left") {
+        if (!this.dataL.length) return;
+        this.dataL = [];
+        this.leftData = [];
+      } else {
+        if (!this.dataR.length) return;
+        this.dataR = [];
+        this.rightData = [];
+      }
+    },
+    //删除部分或单个数据
+    handlePartDelete(direction) {
+      if (direction === "left") {
+        this.dataL.forEach((k, d) => {
+          this.leftData.forEach((e) => {
+            if (e == k) {
+              this.dataL.splice(d, 1);
+              this.leftData = [];
+              return;
+            }
+          });
+        });
+      } else {
+        this.dataR.forEach((k, d) => {
+          this.rightData.forEach((e) => {
+            if (e == k) {
+              this.dataR.splice(d, 1);
+              this.rightData = [];
+              return;
+            }
+          });
+        });
+      }
+    },
+    // 判断能操作那边框
+    handleJudge(type) {
+      if (this.leftDisabled) {
+        // 左边框功能操作
+        this.hanleType(type, "left");
+      } else {
+        // 右边框功能操作
+        this.hanleType(type, "right");
+      }
+    },
+    // 获取事件类型
+    hanleType(type, direction) {
+      switch (type) {
+        case "AddAll":
+          this.handleAllData(direction);
+          break;
+        case "AddPart":
+          this.handlePartData(direction);
+          break;
+        case "DeleteAll":
+          this.handleAllDelete(direction);
+          break;
+        case "DeletePart":
+          this.handlePartDelete(direction);
+          break;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+// 穿梭框
+.transfer {
+  margin: 20px 0;
+  &_title {
+    margin: 20px 20px 0 20px;
+  }
+  .left_box {
+    width: 430px;
+    height: 450px;
+    border: 1px solid #eee;
+    &_flex {
+      display: flex;
+      flex-direction: column;
+      margin: 20px;
+      .el-checkbox {
+        padding: 10px 0;
+      }
+    }
+  }
+  .right_box {
+    width: 430px;
+    height: 450px;
+    border: 1px solid #eee;
+    &_flex {
+      display: flex;
+      flex-direction: column;
+      margin: 20px;
+      .el-checkbox {
+        padding: 10px 0;
+      }
+    }
+  }
+}
+.middle_box {
+  text-align: center;
+  height: 430px;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+}
+.el-row .el-col {
+  margin: 20px 0;
+}
+.select_height {
+  width: 100%;
+}
+</style>

src/views/sales_policy/marketing_list.vue

@@ -1,5 +1,150 @@
 <template>
-    <div>
-        营销活动
-    </div>
-</template>
+  <el-container v-if="isShow">
+    <el-header height="100%" class="mg">
+      <el-row>
+        <el-col :span="12">
+          <el-input
+            v-model="input"
+            placeholder="销售政策编号"
+            size="normal"
+            clearable
+            @change=""
+          ></el-input>
+        </el-col>
+
+      </el-row>
+      <el-row class="mg">
+        <el-button type="primary" size="default" @click="">查询</el-button>
+        <el-button type="primary" size="default" @click="">重置</el-button>
+        <el-button type="primary" size="default" @click="">新增</el-button>
+        <el-button type="primary" size="default" @click="">打印</el-button>
+
+      </el-row>
+    </el-header>
+    <el-main>
+    <el-table
+    ref="multipleTable"
+    :data="tableData"
+    border
+    tooltip-effect="dark"
+    style="width: 100%"
+    @selection-change="handleSelectionChange">
+    <el-table-column
+      type="selection"
+      align="center"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      label="营销活动"
+      align="center"
+     >
+      <template slot-scope="scope">{{ scope.row.date }}</template>
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="生效时间"
+      align="center"
+     >
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="结束时间"
+      align="center"
+      show-overflow-tooltip>
+    </el-table-column>
+        <el-table-column
+      prop="name"
+      label="创建者"
+      align="center"
+     >
+    </el-table-column>
+        <el-table-column
+      prop="name"
+      label="创建时间"
+      align="center"
+     >
+    </el-table-column>
+        <el-table-column
+      prop="name"
+      label="更新者"
+      align="center"
+     >
+    </el-table-column>
+        <el-table-column
+      prop="name"
+      label="更新时间"
+      align="center"
+     >
+    </el-table-column>
+        <el-table-column
+      prop="name"
+      label="创建者"
+      align="center"
+     >
+    </el-table-column>
+  </el-table>
+    </el-main>
+    <Pagination />
+  </el-container>
+  <NewInfo v-else/>
+</template>
+
+<script>
+import Pagination from "./components/Pagination";
+import NewInfo from './components/NewInfo'
+export default {
+  data() {
+    return {
+      isShow:false,
+      input: "",
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1517 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1519 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1516 弄",
+          zip: 200333,
+        },
+      ],
+    };
+  },
+  components: {
+    Pagination,
+    NewInfo
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.mg {
+  margin: 20px 0;
+}
+.btn {
+  text-align: right;
+}
+</style>

src/views/sales_policy/policy_list.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-container v-if="isShow">
+  <el-container v-if="isShow == 1">
     <el-header class="header_" height="100%">
       <el-row type="flex" gutter="20" class="header_input">
         <el-col :span="6"
@@ -14,25 +14,32 @@
         <el-col :span="6"
           ><el-input v-model="input" placeholder="生效日期"></el-input>
         </el-col>
+      </el-row>
+      <el-row type="flex" gutter="20" class="header_input">
         <el-col :span="6"
           ><el-input v-model="input" placeholder="结束日期"></el-input>
         </el-col>
         <el-col :span="6"
           ><el-input v-model="input" placeholder="制表日期"></el-input>
         </el-col>
-      </el-row>
-      <el-row type="flex" gutter="20">
         <el-col :span="6"
           ><el-input v-model="input" placeholder="制表人"></el-input>
         </el-col>
         <el-col :span="6"
           ><el-input v-model="input" placeholder="审核人"></el-input>
         </el-col>
+      </el-row>
+      <el-row type="flex" gutter="20">
         <el-col :span="6"
           ><el-input v-model="input" placeholder="关闭人"></el-input>
         </el-col>
         <el-col :span="6">
-          <el-select v-model="value" disabled placeholder="状态">
+          <el-select
+            v-model="value"
+            disabled
+            placeholder="状态"
+            class="select_height"
+          >
             <el-option
               v-for="item in options"
               :key="item.value"
@@ -43,7 +50,12 @@
           </el-select>
         </el-col>
         <el-col :span="6">
-          <el-select v-model="value" disabled placeholder="销售政策类型">
+          <el-select
+            v-model="value"
+            disabled
+            placeholder="销售政策类型"
+            class="select_height"
+          >
             <el-option
               v-for="item in options"
               :key="item.value"
@@ -53,7 +65,7 @@
             </el-option>
           </el-select>
         </el-col>
-        <el-col :span="6">
+        <!-- <el-col :span="6">
           <el-row type="flex" gutter="20" justify="space-between">
             <el-col>
               <el-button type="primary" class="btn">查询</el-button>
@@ -63,15 +75,15 @@
                 ><i class="el-icon-delete"></i> </el-button
             ></el-col>
           </el-row>
-        </el-col>
+        </el-col> -->
       </el-row>
       <el-row type="flex" class="mpd">
-        <el-col :span="1">
-          <el-button type="primary" class="btn">新增</el-button>
-        </el-col>
-        <el-col :span="1" push="1">
-          <el-button type="primary" class="btn">导出</el-button>
-        </el-col>
+        <el-button type="primary" class="btn">新增</el-button>
+        <el-button type="primary" class="btn">导出</el-button>
+        <el-button type="primary" class="btn">查询</el-button>
+        <el-button type="primary" class="btn" icon=""
+          ><i class="el-icon-delete"></i>
+        </el-button>
       </el-row>
     </el-header>
     <el-main>
@@ -121,21 +133,24 @@
         <el-table-column prop="zip" label="关闭日期" width="120" align="center">
         </el-table-column>
       </el-table>
-       <Pagination/>
     </el-main>
-
+    <Pagination />
   </el-container>
-  <AddPolicy v-else />
+  <AddPolicy v-else-if="isShow == 2" />
+  <AddCondition v-else-if="isShow == 3" />
+  <AddModel v-else />
 </template>
 
 <script>
-import AddPolicy from "@/components/Sales/AddPolicy";
-import Pagination from "@/components/Sales/Pagination";
+import AddPolicy from "./components/AddPolicy";
+import AddModel from "./components/AddModel";
+import Pagination from "./components/Pagination";
+import AddCondition from "./components/AddCondition";
 export default {
   data() {
     return {
       input: "",
-      isShow: false,
+      isShow: 3,
       tableData: [
         {
           date: "2016-05-02",
@@ -173,8 +188,10 @@ export default {
     };
   },
   components: {
+    AddModel,
     AddPolicy,
-    Pagination
+    Pagination,
+    AddCondition,
   },
 };
 </script>
@@ -187,11 +204,13 @@ export default {
   padding: 20px 0 0 0;
 }
 
-
 .header_ {
   margin-top: 20px;
   &input {
     padding-bottom: 10px;
   }
 }
+.select_height {
+  width: 100%;
+}
 </style>