新增销售政策列表下部分页面

package.json

@@ -28,7 +28,8 @@
     "vue-pdf": "^4.3.0",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "3.0.6",
-    "vuex": "3.1.0"
+    "vuex": "3.1.0",
+    "yarn": "^1.22.18"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.4",

src/components/Sales/AddCondition.vue

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

src/components/Sales/AddModel.vue

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

src/components/Sales/AddPolicy.vue

@@ -0,0 +1,451 @@
+<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"
+        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 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-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-form>
+    </el-header>
+    <el-main height="">
+      <el-row>
+        <el-divider></el-divider>
+        <el-row type="flex" align="middle">
+          <el-col :span="2"> <h4>货品信息</h4> </el-col
+          ><el-button> 导入货品价格表</el-button>
+        </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="货品编码"
+          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="120"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="address"
+          label="销售类型编码"
+          width="500"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column prop="zip" label="销售类型" width="120" align="center">
+        </el-table-column>
+        <el-table-column prop="zip" label="单价" width="120" align="center">
+        </el-table-column>
+        <el-table-column prop="zip" label="返利比例" width="120" align="center">
+        </el-table-column>
+        <el-table-column prop="zip" label="表体备注" width="120" 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>
+      <Pagination />
+    </el-main>
+    <el-footer height="" class="footer">
+      <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>
+      <el-row class="radio">
+        <el-radio v-model="radio" label="1">全部经销商</el-radio>
+        <el-radio v-model="radio" label="2">品类</el-radio>
+        <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>
+    </el-footer>
+  </el-container>
+</template>
+
+<script>
+import Pagination from "@/components/Sales/Pagination";
+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: "",
+      },
+      listLoading: false,
+      rules: {
+        name: [
+          { required: true, message: "", trigger: "click" },
+          { 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",
+          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: "",
+      leftData: [],
+      rightData: [],
+    };
+  },
+  computed: {
+    isDisabled() {
+      return !(this.leftData.length ||  this.rightData.length)
+    },
+  },
+  methods: {
+    handelLeftCheck(e) {
+      console.log(e);
+    },
+  },
+  components: {
+    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;
+}
+::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;
+}
+</style>

src/components/Sales/Pagination.vue

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

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

src/views/sales_policy/marketing_list.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        营销活动
+    </div>
+</template>

src/views/sales_policy/policy_list.vue

@@ -0,0 +1,197 @@
+<template>
+  <el-container v-if="isShow">
+    <el-header class="header_" height="100%">
+      <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-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-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-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-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-col>
+        <el-col :span="6">
+          <el-select v-model="value" disabled 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 :span="6">
+          <el-row type="flex" gutter="20" justify="space-between">
+            <el-col>
+              <el-button type="primary" class="btn">查询</el-button>
+            </el-col>
+            <el-col>
+              <el-button type="primary" class="btn" icon=""
+                ><i class="el-icon-delete"></i> </el-button
+            ></el-col>
+          </el-row>
+        </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-row>
+    </el-header>
+    <el-main>
+      <el-table :data="tableData" border style="width: 100%" height="600">
+        <el-table-column fixed="left" label="操作" width="200" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" size="small">申请</el-button>
+            <el-button type="text" size="small">编辑</el-button>
+            <el-button type="text" size="small">详情</el-button>
+            <el-button type="text" size="small">删除</el-button>
+          </template>
+        </el-table-column>
+        <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="120"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column prop="address" label="部门" width="300" align="center">
+        </el-table-column>
+        <el-table-column prop="zip" label="表头备注" width="120" align="center">
+        </el-table-column>
+        <el-table-column prop="zip" label="生效日期" width="120" align="center">
+        </el-table-column>
+        <el-table-column prop="zip" label="结束日期" width="120" align="center">
+        </el-table-column>
+        <el-table-column prop="zip" label="制表人" width="120" align="center">
+        </el-table-column>
+        <el-table-column prop="zip" label="制表日期" width="120" align="center">
+        </el-table-column>
+        <el-table-column prop="zip" label="审核人" width="120" align="center">
+        </el-table-column>
+        <el-table-column prop="zip" label="审核日期" width="120" align="center">
+        </el-table-column>
+        <el-table-column prop="zip" label="关闭人" width="120" align="center">
+        </el-table-column>
+        <el-table-column prop="zip" label="关闭日期" width="120" align="center">
+        </el-table-column>
+      </el-table>
+       <Pagination/>
+    </el-main>
+
+  </el-container>
+  <AddPolicy v-else />
+</template>
+
+<script>
+import AddPolicy from "@/components/Sales/AddPolicy";
+import Pagination from "@/components/Sales/Pagination";
+export default {
+  data() {
+    return {
+      input: "",
+      isShow: false,
+      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: {
+    AddPolicy,
+    Pagination
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.btn {
+  width: 80px;
+}
+.mpd {
+  padding: 20px 0 0 0;
+}
+
+
+.header_ {
+  margin-top: 20px;
+  &input {
+    padding-bottom: 10px;
+  }
+}
+</style>