信息录入主表

package.json

@@ -67,7 +67,8 @@
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",
     "vuedraggable": "2.20.0",
-    "vuex": "3.1.0"
+    "vuex": "3.1.0",
+    "xlsx": "^0.17.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.4",

src/api/preData.js

@@ -0,0 +1,73 @@
+import request from '@/utils/request'
+import { data } from 'jquery'
+
+// 登录方法
+export function login(username, password, code, uuid) {
+  const data = {
+    username,
+    password,
+    code,
+    uuid
+  }
+  return request({
+    url: '/login',
+    method: 'post',
+    data: data
+  })
+}
+
+// 获取用户详细信息
+
+export function getIssueList() {
+  return request({
+    url: '/coupon/issue/listByLogin',
+    method: 'get'
+  })
+}
+
+export function getGradeList() {
+  return request({
+    url: '/customer/setting/listByLogin',
+    method: 'get'
+  })
+}
+
+export function getLabelList() {
+  return request({
+    url: '/label/rule/listByLogin',
+    method: 'get'
+  })
+}
+
+// 新增 导入数据
+export function importExcel(data) {
+  return request({
+    url: '/customer/cardImport/importCardExcel',
+    method: 'post',
+    data: data
+  })
+}
+
+export function getImportList(data) {
+  return request({
+    url: '/customer/cardImport/list',
+    method: 'get',
+    params: data
+  })
+}
+
+// 退出方法
+export function logout() {
+  return request({
+    url: '/logout',
+    method: 'post'
+  })
+}
+
+// 获取验证码
+export function getCodeImg() {
+  return request({
+    url: '/captchaImage',
+    method: 'get'
+  })
+}

src/utils/excel.js

@@ -0,0 +1,108 @@
+import XLSX from 'xlsx';
+
+function auto_width(ws, data) {
+    /*set worksheet max width per col*/
+    const colWidth = data.map(row => row.map(val => {
+        /*if null/undefined*/
+        if (val == null) {
+            return {'wch': 10};
+        }
+        /*if chinese*/
+        else if (val.toString().charCodeAt(0) > 255) {
+            return {'wch': val.toString().length * 2};
+        } else {
+            return {'wch': val.toString().length};
+        }
+    }))
+    /*start in the first row*/
+    let result = colWidth[0];
+    for (let i = 1; i < colWidth.length; i++) {
+        for (let j = 0; j < colWidth[i].length; j++) {
+            if (result[j]['wch'] < colWidth[i][j]['wch']) {
+                result[j]['wch'] = colWidth[i][j]['wch'];
+            }
+        }
+    }
+    ws['!cols'] = result;
+}
+
+function json_to_array(key, jsonData) {
+    return jsonData.map(v => key.map(j => {
+        return v[j]
+    }));
+}
+
+// fix data,return string
+function fixdata(data) {
+    let o = ''
+    let l = 0
+    const w = 10240
+    for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
+    o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
+    return o
+}
+
+// get head from excel file,return array
+function get_header_row(sheet) {
+    const headers = []
+    const range = XLSX.utils.decode_range(sheet['!ref'])
+    let C
+    const R = range.s.r /* start in the first row */
+    for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
+        var cell = sheet[XLSX.utils.encode_cell({c: C, r: R})] /* find the cell in the first row */
+        var hdr = 'UNKNOWN ' + C // <-- replace with your desired default
+        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
+        headers.push(hdr)
+    }
+    return headers
+}
+
+export const export_table_to_excel = (id, filename) => {
+    const table = document.getElementById(id);
+    const wb = XLSX.utils.table_to_book(table);
+    XLSX.writeFile(wb, filename);
+}
+
+export const export_json_to_excel = ({data, key, title, filename, autoWidth}) => {
+    const wb = XLSX.utils.book_new();
+    data.unshift(title);
+    const ws = XLSX.utils.json_to_sheet(data, {header: key, skipHeader: true});
+    if (autoWidth) {
+        const arr = json_to_array(key, data);
+        auto_width(ws, arr);
+    }
+    XLSX.utils.book_append_sheet(wb, ws, filename);
+    XLSX.writeFile(wb, filename + '.xlsx');
+}
+
+export const export_array_to_excel = ({key, data, title, filename, autoWidth}) => {
+    const wb = XLSX.utils.book_new();
+    const arr = json_to_array(key, data);
+    arr.unshift(title);
+    const ws = XLSX.utils.aoa_to_sheet(arr);
+    if (autoWidth) {
+        auto_width(ws, arr);
+    }
+    XLSX.utils.book_append_sheet(wb, ws, filename);
+    XLSX.writeFile(wb, filename + '.xlsx');
+}
+
+export const read = (data, type) => {
+    const workbook = XLSX.read(data, {type: type});
+    console.log(workbook.SheetNames[0]);
+    const firstSheetName = workbook.SheetNames[0];
+    const worksheet = workbook.Sheets[firstSheetName];
+    console.log(worksheet);
+    const header = get_header_row(worksheet);
+    console.log(header);
+    const results = XLSX.utils.sheet_to_json(worksheet);
+    console.log(results)
+    return {header, results};
+}
+
+export default {
+    export_table_to_excel,
+    export_array_to_excel,
+    export_json_to_excel,
+    read
+}

src/views/dzk/Dzk_Rule.vue

@@ -1,215 +1,230 @@
 <template>
-<PermissionContainer 
-  :jiBieArr=[1,2] 
-  :type="2" 
-  :isFlag="true"
-  :tipArr="[,'电子卡功能只对集团和站点级别开放','因为集团上关于电子卡的共享配置，此级没有配置权限',,'您暂未启动电子卡功能',]" 
-> 
-    <div  class="app-container">
-    <el-form
-      ref="settingForm"
-      :model="settingForm"
-      :rules="settingRules"
-      label-width="150px"
-    >
-      <el-form-item label="是否启用电子卡" prop="cardEnabledFlag">
-        <el-radio-group v-model="settingForm.cardEnabledFlag">
-          <el-radio label="0">关闭</el-radio>
-          <el-radio label="1">开启</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <div v-show="settingForm.cardEnabledFlag == 1">
-        <el-form-item label="启用哪种电子卡">
-          <el-checkbox-group
-            v-model="settingForm.cardOilsType"
-            @change="effectiveRefresh"
-          >
-            <el-checkbox label="1">汽油卡</el-checkbox>
-            <el-checkbox label="2">柴油卡</el-checkbox>
-            <!-- <el-checkbox label="3">非油品卡</el-checkbox> -->
-            <el-checkbox label="4">LNG卡</el-checkbox>
-            <el-checkbox label="5">CNG卡</el-checkbox>
-          </el-checkbox-group>
-        </el-form-item>
-        <div style="text-align: right">
-          <el-button type="primary" @click="handleAdd" size="mini">
-            新增规则
-          </el-button>
-        </div>
-        <div>
-          <el-table :data="settingForm.detailList">
-            <af-table-column
-              label="电子卡"
-              align="center"
-              :formatter="oilNameFormatter"
-            />
-            <af-table-column label="条件" align="center" prop="discountAmtTerm">
-              <template slot-scope="scope1">
-                {{ scope1.row.discountAmtStart }}≤充值金额(元)&lt;{{
-                  scope1.row.discountAmtEnd
-                }}
-              </template>
-            </af-table-column>
-
-            <af-table-column label="赠送" align="center">
-              <template slot-scope="scope">
-                {{
-                  scope.row.settingRuleType == 1
-                    ? "按金额赠送"
-                    : scope.row.settingRuleType == 2
-                    ? "按比例赠送"
-                    : ""
-                }}
-                --- 额度为 {{ scope.row.presentAmt }}
-                {{
-                  scope.row.settingRuleType == "1"
-                    ? "元"
-                    : scope.row.settingRuleType == "2"
-                    ? "%"
-                    : ""
-                }}
-              </template>
-            </af-table-column>
-            <af-table-column label="生效状态" align="center">
-              <template slot-scope="scope">
-                {{ effective(scope.row.cardType) }}
-              </template>
-            </af-table-column>
-            <af-table-column
-              label="操作"
-              align="center"
-              class-name="small-padding fixed-width"
-            >
-              <template slot-scope="scope">
-                <el-button
-                  size="mini"
-                  type="text"
-                  icon="el-icon-edit"
-                  @click="handleUpdate(scope.$index, scope.row)"
-                  >修改</el-button
-                >
-                <el-button
-                  size="mini"
-                  type="text"
-                  icon="el-icon-delete"
-                  @click="handleDelete(scope.$index, scope.row)"
-                  >删除</el-button
-                >
-              </template>
-            </af-table-column>
-          </el-table>
-        </div>
-        <el-form-item label="充值活动" required prop="discountTimeSetting">
-          <el-radio-group v-model="settingForm.discountTimeSetting">
+  <PermissionContainer
+    :jiBieArr="[1, 2]"
+    :type="2"
+    :isFlag="true"
+    :tipArr="[
+      ,
+      '电子卡功能只对集团和站点级别开放',
+      '因为集团上关于电子卡的共享配置，此级没有配置权限',
+      ,
+      '您暂未启动电子卡功能',
+    ]"
+  >
+    <div class="app-container">
+      <el-form
+        ref="settingForm"
+        :model="settingForm"
+        :rules="settingRules"
+        label-width="200px"
+      >
+        <el-form-item label="是否启用电子卡" prop="cardEnabledFlag">
+          <el-radio-group v-model="settingForm.cardEnabledFlag">
             <el-radio label="0">关闭</el-radio>
             <el-radio label="1">开启</el-radio>
           </el-radio-group>
         </el-form-item>
-        <div v-show="settingForm.discountTimeSetting == 1">
-          <el-form-item
-            label="活动的周期类型"
-            prop="discountTimeType"
-            :required="settingForm.discountTimeSetting == 1"
-          >
-            <el-select
-              v-model="settingForm.discountTimeType"
-              clearable
-              size="mini"
-              @change="timeClear"
+        <div v-show="settingForm.cardEnabledFlag == 1">
+          <el-form-item label="启用哪种电子卡">
+            <el-checkbox-group
+              v-model="settingForm.cardOilsType"
+              @change="effectiveRefresh"
             >
-              <el-option label="每周指定日" value="1"></el-option>
-              <el-option label="每月指定日" value="2"></el-option>
-              <el-option label="固定活动日" value="3"></el-option>
-            </el-select>
-            <div
-              v-show="settingForm.discountTimeType != 3"
-              style="
-                display: flex;
-                flex-wrap: wrap;
-                border-style: solid;
-                border-color: #f5f7fa;
-              "
+              <el-checkbox label="1">汽油卡</el-checkbox>
+              <el-checkbox label="2">柴油卡</el-checkbox>
+              <!-- <el-checkbox label="3">非油品卡</el-checkbox> -->
+              <el-checkbox label="4">LNG卡</el-checkbox>
+              <el-checkbox label="5">CNG卡</el-checkbox>
+            </el-checkbox-group>
+          </el-form-item>
+
+          <div style="width: 900px; margin-left: 90px;margin-bottom:40px;">
+            <div style="text-align: right">
+              <el-button type="primary" @click="handleAdd" size="mini" style="margin-bottom:20px;margin-right:50px">
+                新 增 规 则
+              </el-button>
+            </div>
+            <el-table
+              :data="settingForm.detailList"
             >
+              <af-table-column
+                label="电子卡"
+                align="center"
+                :formatter="oilNameFormatter"
+              />
+              <af-table-column
+                label="条件"
+                align="center"
+                prop="discountAmtTerm"
+              >
+                <template slot-scope="scope1">
+                  {{ scope1.row.discountAmtStart }}≤充值金额(元)&lt;{{
+                    scope1.row.discountAmtEnd
+                  }}
+                </template>
+              </af-table-column>
+
+              <af-table-column label="赠送" align="center">
+                <template slot-scope="scope">
+                  {{
+                    scope.row.settingRuleType == 1
+                      ? "按金额赠送"
+                      : scope.row.settingRuleType == 2
+                      ? "按比例赠送"
+                      : ""
+                  }}
+                  --- 额度为 {{ scope.row.presentAmt }}
+                  {{
+                    scope.row.settingRuleType == "1"
+                      ? "元"
+                      : scope.row.settingRuleType == "2"
+                      ? "%"
+                      : ""
+                  }}
+                </template>
+              </af-table-column>
+              <af-table-column label="生效状态" align="center">
+                <template slot-scope="scope">
+                  {{ effective(scope.row.cardType) }}
+                </template>
+              </af-table-column>
+              <af-table-column
+                label="操作"
+                align="center"
+                class-name="small-padding fixed-width"
+              >
+                <template slot-scope="scope">
+                  <el-button
+                    size="mini"
+                    type="text"
+                    icon="el-icon-edit"
+                    @click="handleUpdate(scope.$index, scope.row)"
+                    >修改</el-button
+                  >
+                  <el-button
+                    size="mini"
+                    type="text"
+                    icon="el-icon-delete"
+                    @click="handleDelete(scope.$index, scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </af-table-column>
+            </el-table>
+          </div>
+          <el-form-item label="充值活动" required prop="discountTimeSetting">
+            <el-radio-group v-model="settingForm.discountTimeSetting">
+              <el-radio label="0">关闭</el-radio>
+              <el-radio label="1">开启</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <div v-show="settingForm.discountTimeSetting == 1">
+            <el-form-item
+              label="活动的周期类型"
+              prop="discountTimeType"
+              :required="settingForm.discountTimeSetting == 1"
+            >
+              <el-select
+                v-model="settingForm.discountTimeType"
+                clearable
+                size="mini"
+                @change="timeClear"
+              >
+                <el-option label="每周指定日" value="1"></el-option>
+                <el-option label="每月指定日" value="2"></el-option>
+                <el-option label="固定活动日" value="3"></el-option>
+              </el-select>
               <div
-                v-for="(item, index) in timeSelect[
-                  settingForm.discountTimeType
-                ]"
-                :key="index"
-                style="margin: 3px"
+                v-show="settingForm.discountTimeType != 3"
+                style="
+                  display: flex;
+                  flex-wrap: wrap;
+                  border-style: solid;
+                  border-color: #f5f7fa;
+                "
               >
                 <div
-                  class="hover-style"
-                  style="
-                    border-radius: 5px;
-                    font-weight: bold;
-                    font-size: 12px;
-                    cursor: pointer;
-                  "
-                  @click="timeClickCalendar(index)"
+                  v-for="(item, index) in timeSelect[
+                    settingForm.discountTimeType
+                  ]"
+                  :key="index"
+                  style="margin: 3px"
                 >
-                  <div>{{ item }}</div>
                   <div
-                    v-if="settingForm.collectClickCalendar.indexOf(index) > -1"
+                    class="hover-style"
                     style="
-                      width: 4px;
-                      height: 4px;
-                      border-radius: 50%;
-                      background-color: red;
-                      position: relative;
-                      left: calc(50% - 2px);
+                      border-radius: 5px;
+                      font-weight: bold;
+                      font-size: 12px;
+                      cursor: pointer;
                     "
-                  ></div>
-                  <div v-else style="width: 4px; height: 4px"></div>
+                    @click="timeClickCalendar(index)"
+                  >
+                    <div>{{ item }}</div>
+                    <div
+                      v-if="
+                        settingForm.collectClickCalendar.indexOf(index) > -1
+                      "
+                      style="
+                        width: 4px;
+                        height: 4px;
+                        border-radius: 50%;
+                        background-color: red;
+                        position: relative;
+                        left: calc(50% - 2px);
+                      "
+                    ></div>
+                    <div v-else style="width: 4px; height: 4px"></div>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div v-show="settingForm.discountTimeType == 3">
-              <el-date-picker
-                clearable
-                size="small"
-                style="margin-left: 10px; width: 200px"
-                v-model="settingForm.collectClickDay"
-                type="dates"
-                value-format="yyyy-MM-dd"
-                placeholder="选择提醒时间设置"
-              >
-              </el-date-picker>
-            </div>
+              <div v-show="settingForm.discountTimeType == 3">
+                <el-date-picker
+                  clearable
+                  size="small"
+                  style="margin-left: 10px; width: 200px"
+                  v-model="settingForm.collectClickDay"
+                  type="dates"
+                  value-format="yyyy-MM-dd"
+                  placeholder="选择提醒时间设置"
+                >
+                </el-date-picker>
+              </div>
+            </el-form-item>
+            <el-form-item
+              label="活动的赠送比例"
+              prop="presentScale"
+              :required="settingForm.discountTimeSetting == 1"
+            >
+              <el-input
+                v-model="settingForm.presentScale"
+                placeholder="请输入赠送比例"
+                style="width: 70px"
+              />%
+            </el-form-item>
+          </div>
+
+          <el-form-item
+            prop="isMarket"
+            label="是否叠加优惠方案"
+            :required="settingForm.cardEnabledFlag == 1"
+          >
+            <el-radio-group v-model="settingForm.isMarket">
+              <el-radio label="1">叠加</el-radio>
+              <el-radio label="0">不叠加</el-radio>
+            </el-radio-group>
           </el-form-item>
           <el-form-item
-            label="活动的赠送比例"
-            prop="presentScale"
-            :required="settingForm.discountTimeSetting == 1"
+            prop="isGradeSetting"
+            label="是否叠加等级优惠"
+            :required="settingForm.cardEnabledFlag == 1"
           >
-            <el-input
-              v-model="settingForm.presentScale"
-              placeholder="请输入赠送比例"
-              style="width: 70px"
-            />%
+            <el-radio-group v-model="settingForm.isGradeSetting">
+              <el-radio label="1">叠加</el-radio>
+              <el-radio label="0">不叠加</el-radio>
+            </el-radio-group>
           </el-form-item>
-        </div>
-
-        <el-form-item
-          prop="isMarket"
-          label="是否叠加优惠方案"
-          :required="settingForm.cardEnabledFlag == 1"
-        >
-          <el-radio-group v-model="settingForm.isMarket">
-            <el-radio label="1">叠加</el-radio>
-            <el-radio label="0">不叠加</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item
-          prop="isGradeSetting"
-          label="是否叠加等级优惠"
-          :required="settingForm.cardEnabledFlag == 1"
-        >
-          <el-radio-group v-model="settingForm.isGradeSetting">
-            <el-radio label="1">叠加</el-radio>
-            <el-radio label="0">不叠加</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <!-- <el-form-item
+          <!-- <el-form-item
           prop="isDiscountCoupon"
           label="是否叠加优惠券"
           :required="settingForm.cardEnabledFlag == 1"
@@ -219,112 +234,111 @@
             <el-radio label="0">不叠加</el-radio>
           </el-radio-group>
         </el-form-item> -->
-        <el-form-item
-          prop="isLabel"
-          label="是否叠加标签"
-          :required="settingForm.cardEnabledFlag == 1"
-        >
-          <el-radio-group v-model="settingForm.isLabel">
-            <el-radio label="1">叠加</el-radio>
-            <el-radio label="0">不叠加</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item
-          prop="enjoyIntegralMultiple"
-          label="支付产生积分倍数"
-          :required="settingForm.cardEnabledFlag == 1"
+          <el-form-item
+            prop="isLabel"
+            label="是否叠加标签"
+            :required="settingForm.cardEnabledFlag == 1"
+          >
+            <el-radio-group v-model="settingForm.isLabel">
+              <el-radio label="1">叠加</el-radio>
+              <el-radio label="0">不叠加</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item
+            prop="enjoyIntegralMultiple"
+            label="支付产生积分倍数"
+            :required="settingForm.cardEnabledFlag == 1"
+          >
+            电子卡支付产生的积分数量是微信支付产生积分数量的
+            <el-input
+              v-model="settingForm.enjoyIntegralMultiple"
+              style="width: 60px"
+              size="mini"
+            />倍
+          </el-form-item>
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm" size="mini"
+          >确 定</el-button
         >
-          <el-input
-            v-model="settingForm.enjoyIntegralMultiple"
-            style="width: 60px"
-            size="mini"
-          />倍
-        </el-form-item>
       </div>
-    </el-form>
-    <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="submitForm" size="mini"
-        >确 定</el-button
-      >
-    </div>
 
-    <!-- 添加或修改客户电子会员卡充值优惠设置明细对话框 -->
-    <el-dialog :title="title" :visible.sync="open" append-to-body>
-      <el-form
-        ref="infoForm"
-        :model="infoForm"
-        :rules="infoRules"
-        label-width="120px"
-      >
-        <el-form-item label="电子卡" prop="cardType" required>
-          <el-select
-            v-model="infoForm.cardType"
-            placeholder="请选择电子卡"
-            clearable
-            size="mini"
-          >
-            <el-option label="汽油卡" value="1"></el-option>
-            <el-option label="柴油卡" value="2"></el-option>
-            <el-option label="非油品卡" value="3"></el-option>
-            <el-option label="LNG卡" value="4"></el-option>
-            <el-option label="CNG卡" value="5"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="条件设置" prop="discountAmtEnd" required>
-          <el-input-number
-            v-model="infoForm.discountAmtStart"
-            size="mini"
-            style="width: 120px"
-          />
-          <span>≤ 充值金额(元) &lt;</span>
-          <el-input-number
-            v-model="infoForm.discountAmtEnd"
-            size="mini"
-            style="width: 120px"
-          />
-        </el-form-item>
-        <el-form-item label="赠送方式" prop="presentAmt" required>
-          <div>
+      <!-- 添加或修改客户电子会员卡充值优惠设置明细对话框 -->
+      <el-dialog :title="title" :visible.sync="open" append-to-body>
+        <el-form
+          ref="infoForm"
+          :model="infoForm"
+          :rules="infoRules"
+          label-width="120px"
+        >
+          <el-form-item label="电子卡" prop="cardType" required>
             <el-select
-              v-model="infoForm.settingRuleType"
-              placeholder="请选择赠送方式"
+              v-model="infoForm.cardType"
+              placeholder="请选择电子卡"
+              clearable
               size="mini"
             >
-              <el-option label="按金额赠送" value="1"></el-option>
-              <el-option label="按比例赠送" value="2"></el-option>
+              <el-option label="汽油卡" value="1"></el-option>
+              <el-option label="柴油卡" value="2"></el-option>
+              <el-option label="非油品卡" value="3"></el-option>
+              <el-option label="LNG卡" value="4"></el-option>
+              <el-option label="CNG卡" value="5"></el-option>
             </el-select>
-            <div v-show="!!this.infoForm.settingRuleType">
-              <el-input
-                v-model="infoForm.presentAmt"
-                style="width: 100px"
+          </el-form-item>
+          <el-form-item label="条件设置" prop="discountAmtEnd" required>
+            <el-input-number
+              v-model="infoForm.discountAmtStart"
+              size="mini"
+              style="width: 120px"
+            />
+            <span>≤ 充值金额(元) &lt;</span>
+            <el-input-number
+              v-model="infoForm.discountAmtEnd"
+              size="mini"
+              style="width: 120px"
+            />
+          </el-form-item>
+          <el-form-item label="赠送方式" prop="presentAmt" required>
+            <div>
+              <el-select
+                v-model="infoForm.settingRuleType"
+                placeholder="请选择赠送方式"
                 size="mini"
-              />
-              <span>{{
-                this.infoForm.settingRuleType == "1"
-                  ? "元"
-                  : this.infoForm.settingRuleType == "2"
-                  ? "%"
-                  : ""
-              }}</span>
+              >
+                <el-option label="按金额赠送" value="1"></el-option>
+                <el-option label="按比例赠送" value="2"></el-option>
+              </el-select>
+              <div v-show="!!this.infoForm.settingRuleType">
+                <el-input
+                  v-model="infoForm.presentAmt"
+                  style="width: 100px"
+                  size="mini"
+                />
+                <span>{{
+                  this.infoForm.settingRuleType == "1"
+                    ? "元"
+                    : this.infoForm.settingRuleType == "2"
+                    ? "%"
+                    : ""
+                }}</span>
+              </div>
             </div>
-          </div>
-        </el-form-item>
-        <el-form-item>
-          <div>
-            <div style="color: red">例：</div>
-            <div style="color: red">按赠送金额：充100赠送10元</div>
-            <div style="color: red">按赠送比例：充100赠送10%</div>
-          </div>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="addItem">添加</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</PermissionContainer>
-
-
+          </el-form-item>
+          <el-form-item>
+            <div>
+              <div style="color: red">例：</div>
+              <div style="color: red">按赠送金额：充100赠送10元</div>
+              <div style="color: red">按赠送比例：充100赠送10%</div>
+            </div>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="addItem">添加</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </PermissionContainer>
 </template>
 
 <script>
@@ -390,7 +404,10 @@ export default {
         }
       }
       if (this.settingForm.discountTimeType == 3) {
-        if (this.settingForm.collectClickDay==null || this.settingForm.collectClickDay.length <= 0) {
+        if (
+          this.settingForm.collectClickDay == null ||
+          this.settingForm.collectClickDay.length <= 0
+        ) {
           callback(new Error("请填写活动时间"));
           return;
         }
@@ -485,12 +502,14 @@ export default {
         this.settingForm = response.data;
         this.settingForm.collectClickCalendar = [];
         this.settingForm.collectClickDay = "";
-        if(this.settingForm.cardOilsType == null){
-          this.settingForm.cardOilsType = ''
+        if (this.settingForm.cardOilsType == null) {
+          this.settingForm.cardOilsType = "";
         }
-        const cardOilsType = this.settingForm.cardOilsType.split(',').filter((ele)=>{
-          return ele != ''
-        })
+        const cardOilsType = this.settingForm.cardOilsType
+          .split(",")
+          .filter((ele) => {
+            return ele != "";
+          });
         this.settingForm.cardOilsType = cardOilsType;
         if (
           this.settingForm.discountTimeType == "1" ||
@@ -506,12 +525,11 @@ export default {
           if (this.settingForm.discountTime.length == 0) {
             this.settingForm.collectClickDay = [];
           } else {
-            this.settingForm.collectClickDay = this.settingForm.discountTime.split(
-              ","
-            );
+            this.settingForm.collectClickDay =
+              this.settingForm.discountTime.split(",");
           }
         }
-        this.settingForm ={...this.settingForm}
+        this.settingForm = { ...this.settingForm };
       });
     },
     timeClear() {
@@ -568,19 +586,22 @@ export default {
     submitForm() {
       this.$refs["settingForm"].validate((valid) => {
         if (valid) {
-          this.settingForm.cardOilsType = this.settingForm.cardOilsType.toString();
+          this.settingForm.cardOilsType =
+            this.settingForm.cardOilsType.toString();
           if (
             this.settingForm.discountTimeType == "1" ||
             this.settingForm.discountTimeType == "2"
           ) {
-            this.settingForm.discountTime = this.settingForm.collectClickCalendar.toString();
+            this.settingForm.discountTime =
+              this.settingForm.collectClickCalendar.toString();
           } else {
-            this.settingForm.discountTime = this.settingForm.collectClickDay.toString();
+            this.settingForm.discountTime =
+              this.settingForm.collectClickDay.toString();
           }
           if (this.settingForm.id != null) {
             updateSetting(this.settingForm).then((response) => {
               this.msgSuccess("修改成功");
-              this.init()
+              this.init();
             });
           } else {
             addSetting(this.settingForm).then((response) => {

src/views/point/Point_Rule.vue

@@ -6,10 +6,9 @@
     :tipArr="[,'积分功能只对集团和站点级别开放','因为集团上关于积分的共享配置，此级没有配置权限',,'您暂未启动积分功能',]"
   >
     <div>
-    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+    <el-form ref="form" :model="form" :rules="rules" label-width="200px">
       <el-form-item
         label="是否开启积分"
-        label-width="160px"
         prop="integralFlag"
       >
         <el-radio-group v-model="form.integralFlag">
@@ -22,11 +21,12 @@
           label="积分规则"
           prop="itemsDetail"
           :required="form.integralFlag == 1"
+
         >
           <div
             v-for="(item, index) in form.itemsDetail"
             :key="index"
-            style="border: 1px solid"
+            class="intRule"
           >
             <div>
               适用油品
@@ -135,7 +135,7 @@
         </el-form-item>
 
         <el-form-item
-          label="积分规则时限"
+          label="积分规则失效时间"
           prop="termDateManage"
           :required="form.integralFlag == 1"
         >
@@ -288,7 +288,8 @@
 
     <div slot="footer" class="dialog-footer">
       <el-button type="primary" @click="submitForm" :disabled="false"
-        >确 定</el-button
+      style="margin-left: 200px;margin-bottom:50px"
+        >确 定 执 行</el-button
       >
     </div>
   </div>
@@ -606,9 +607,20 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .hover-style:hover {
   color: white;
   background-color: blue;
+  
+}
+.intRule{
+  margin-bottom: 10px;
+  box-shadow: 0px 2px 9px 4px rgba(16, 178, 125, 0.2);
+  background: rgba(255, 255, 255, 0.08);
+  width:450px;border-radius:20px;
+  > div{
+    margin-left:40px;
+  }
 }
+
 </style>

src/views/preData/PreData_DataEntry copy.vue

@@ -0,0 +1,296 @@
+<template>
+  <div>
+   昂昂昂
+    <div class="container">
+      <input
+        type="file"
+        accept=".xls,.xlsx"
+        class="upload_file"
+        @change="handleUpload($event)"
+      />
+    </div>
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      label-width="88px"
+      style="margin-top: 20px"
+    >
+      <el-form-item label="使用状态" prop="couponIsUsed">
+        <el-select
+          v-model="queryParams.couponIsUsed"
+          clearable
+          placeholder="请选择"
+        >
+          <el-option label="已使用" value="1"></el-option>
+          <el-option label="未使用" value="0"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="核销手机号" prop="verificationUserPhone">
+        <el-input
+          v-model="queryParams.verificationUserPhone"
+          placeholder="请输入手机号"
+          clearable
+          size="small"
+        />
+      </el-form-item>
+      <el-form-item label="领取时间" prop="getCouponTime">
+        <el-date-picker
+          style="width: 350px"
+          v-model="dateRangeCreatedDate"
+          size="mini"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="cyan"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button
+          type="info"
+          icon="el-icon-refresh"
+          size="mini"
+          @click="resetQuery"
+          >重置</el-button
+        >
+        <!--
+        <el-button
+          type="success"
+          icon="el-icon-edit"
+          size="mini"
+          @click="handleUpdate"
+          >导入</el-button
+        >
+
+        <el-button
+          type="danger"
+          icon="el-icon-delete"
+          size="mini"
+          @click="handleDelete"
+          >删除</el-button
+        >
+        <el-button
+          type="warning"
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          >导出</el-button
+        >
+        -->
+      </el-form-item>
+    </el-form>
+    <el-table :data="couponUserList">
+      <af-table-column label="发放方式标识" align="left" prop="issueRemark" />
+      <af-table-column label="活动名称" align="left" prop="issueName" />
+
+      <af-table-column
+        label="手机"
+        align="left"
+        prop="couponRemark"
+        fixed="left"
+      />
+      <af-table-column label="等级" align="left">
+        <template slot-scope="scope">
+          {{
+            scope.row.couponType == 1
+              ? "现金劵" + "--面值：" + scope.row.couponAmt + "元"
+              : ""
+          }}
+          {{
+            scope.row.couponType == 2
+              ? "折扣券" + "--折扣：" + scope.row.couponAmt + "% "
+              : ""
+          }}
+          {{
+            scope.row.couponType == 3
+              ? "兑换券" + "--商品：" + scope.row.couponName
+              : ""
+          }}
+        </template>
+      </af-table-column>
+      <af-table-column label="标签" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.couponIsUsed == "0" ? "未使用" : "" }}
+          {{ scope.row.couponIsUsed == "1" ? "已使用" : "" }}
+          {{ scope.row.couponIsUsed == "2" ? "已核销" : "" }}
+        </template>
+      </af-table-column>
+      <af-table-column label="优惠券" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.couponIsEffective == "0" ? "无效" : "" }}
+          {{ scope.row.couponIsEffective == "1" ? "有效" : "" }}
+        </template>
+      </af-table-column>
+      <af-table-column
+        label="用户保存id"
+        align="center"
+        prop="userId"
+        v-if="false"
+      />
+      <af-table-column label="电子卡余额" align="center" prop="mobilePhone" />
+      <af-table-column label="积分余额" align="center" prop="blogNickName" />
+      <af-table-column
+        label="核销员手机号"
+        align="center"
+        prop="verificationUserPhone"
+      />
+      <af-table-column
+        label="优惠券截止时间"
+        align="center"
+        prop="couponEffectiveTime"
+      >
+        <template slot-scope="scope">
+          <span>{{
+            parseTime(scope.row.couponEffectiveTime, "{y}-{m}-{d} {h}:{i}:{s}")
+          }}</span>
+        </template>
+      </af-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+<script>
+import { listOrder, exportOrder, printOrderInfo } from "@/api/station/order";
+import { stationinfo } from "@/api/station/gun";
+import { listPrice, getPrice } from "@/api/station/price";
+import { queryCouponUserList } from "@/api/coupon";
+import { listManage } from "@/api/station/manage";
+import excel from "@/utils/excel";
+
+export default {
+  name: "coupon_user",
+  data() {
+    return {
+      //创建订单时间间隔
+      dateRangeCreatedDate: [],
+      // 总条数
+      total: 0,
+      // 优惠券的信息
+      couponUserList: [],
+      oilNameOptions: [],
+      // 字典
+      payTypeOptions: [],
+      // 下拉油站
+      stationOptions: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        levelId: this.levelId,
+        pageNum: 1,
+        pageSize: 10,
+        issueId: null,
+        couponId: null,
+        stationId: null,
+        couponIsUsed: null,
+        couponIsEffective: null,
+        getCouponTime: null,
+        verificationUserPhone: null,
+      },
+      // 表单校验
+      rules: {},
+      reprint: false,
+    };
+  },
+  created() {
+    this.getList();
+  },
+
+  methods: {
+    handleUpload(e) {
+      console.log('上传')
+      // console.log(e);
+      const input = e.target;
+      // console.log(input);
+      const files = e.target.files;
+      let file = files[0];
+      // console.log(file);
+      const fileExt = file.name.split(".").pop().toLocaleLowerCase();
+      if (fileExt === "xlsx" || fileExt === "xls") {
+        this.readFile(file);
+        this.file = file;
+      } else {
+        this.msgError("请选择后缀为.xlsx或者.xls的EXCEL文件")
+      }
+      return false;
+    },
+    // 读取文件转换json
+    readFile(file) {
+      const reader = new FileReader();
+      reader.readAsArrayBuffer(file);
+      reader.onloadstart = (e) => {
+        console.log('onloadstart');
+        // this.tableLoading = true;
+      };
+      reader.onprogress = (e) => {
+        console.log('onprogress');
+        this.progressPercent = Math.round((e.loaded / e.total) * 100);
+      };
+      reader.onerror = (e) => {
+        this.msgError("文件读取出错")
+      };
+      reader.onload = (e) => {
+        console.log('onload')
+        const data = e.target.result;
+        const { results } = excel.read(data, "array");
+        //这里的tableData就是拿到的excel表格中的数据
+        console.log('results',results);
+      };
+    },
+    /** 查询订单支付列表 */
+    getList() {
+      this.queryParams.levelId = this.levelId;
+      queryCouponUserList(
+        this.addDateRange(this.queryParams, this.dateRangeCreatedDate)
+      ).then((response) => {
+        this.couponUserList = response.rows;
+        this.total = response.total;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRangeCreatedDate = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$confirm("是否确认导出所有订单支付数据项?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(function () {
+          return exportOrder(queryParams);
+        })
+        .then((response) => {
+          this.download(response.msg);
+        });
+    },
+  },
+};
+</script>

src/views/preData/PreData_DataEntry.vue

@@ -1,43 +1,25 @@
 <template>
-  <div>
+  <PermissionContainer
+    :jiBieArr="[2]"
+    :type="4"
+    :tipArr="[, '标签配置只对站点级别开放', '', , '您没有开启标签功能']"
+  >
     <el-form
-      :model="queryParams"
+      :model="queryForm"
       ref="queryForm"
       :inline="true"
       label-width="88px"
       style="margin-top: 20px"
     >
-      <el-form-item label="使用状态" prop="couponIsUsed">
-        <el-select
-          v-model="queryParams.couponIsUsed"
-          clearable
-          placeholder="请选择"
-        >
-          <el-option label="已使用" value="1"></el-option>
-          <el-option label="未使用" value="0"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="核销手机号" prop="verificationUserPhone">
+      <el-form-item label="手机号" prop="phoneNumber">
         <el-input
-          v-model="queryParams.verificationUserPhone"
+          v-model="queryForm.phoneNumber"
           placeholder="请输入手机号"
           clearable
           size="small"
         />
       </el-form-item>
-      <el-form-item label="领取时间" prop="getCouponTime">
-        <el-date-picker
-          style="width: 350px"
-          v-model="dateRangeCreatedDate"
-          size="mini"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          type="datetimerange"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        >
-        </el-date-picker>
-      </el-form-item>
+
       <el-form-item>
         <el-button
           type="cyan"
@@ -46,6 +28,7 @@
           @click="handleQuery"
           >搜索</el-button
         >
+
         <el-button
           type="info"
           icon="el-icon-refresh"
@@ -53,192 +36,696 @@
           @click="resetQuery"
           >重置</el-button
         >
+
         <el-button
           type="success"
           icon="el-icon-edit"
           size="mini"
-          @click="handleUpdate"
-          >导入</el-button
+          @click="batchAdd"
+          >导入Excel批量新增</el-button
         >
 
         <el-button
-          type="danger"
-          icon="el-icon-delete"
-          size="mini"
-          @click="handleDelete"
-          >删除</el-button
-        >
-        <el-button
-          type="warning"
-          icon="el-icon-download"
+          type="primary"
+          icon="el-icon-plus"
           size="mini"
-          @click="handleExport"
-          >导出</el-button
+          @click="handleAdd"
+          >单条新增</el-button
         >
       </el-form-item>
     </el-form>
-    <el-table :data="couponUserList">
-      <af-table-column label="发放方式标识" align="left" prop="issueRemark" />
-      <af-table-column label="活动名称" align="left" prop="issueName" />
-
-      <af-table-column
-        label="手机"
-        align="left"
-        prop="couponRemark"
-        fixed="left"
-      />
-      <af-table-column label="等级" align="left">
-        <template slot-scope="scope">
-          {{
-            scope.row.couponType == 1
-              ? "现金劵" + "--面值：" + scope.row.couponAmt + "元"
-              : ""
-          }}
-          {{
-            scope.row.couponType == 2
-              ? "折扣券" + "--折扣：" + scope.row.couponAmt + "% "
-              : ""
-          }}
-          {{
-            scope.row.couponType == 3
-              ? "兑换券" + "--商品：" + scope.row.couponName
-              : ""
-          }}
-        </template>
-      </af-table-column>
-      <af-table-column label="标签" align="center">
-        <template slot-scope="scope">
-          {{ scope.row.couponIsUsed == "0" ? "未使用" : "" }}
-          {{ scope.row.couponIsUsed == "1" ? "已使用" : "" }}
-          {{ scope.row.couponIsUsed == "2" ? "已核销" : "" }}
-        </template>
-      </af-table-column>
-      <af-table-column label="优惠券" align="center">
-        <template slot-scope="scope">
-          {{ scope.row.couponIsEffective == "0" ? "无效" : "" }}
-          {{ scope.row.couponIsEffective == "1" ? "有效" : "" }}
-        </template>
-      </af-table-column>
-      <af-table-column
-        label="用户保存id"
-        align="center"
-        prop="userId"
-        v-if="false"
-      />
-      <af-table-column label="电子卡余额" align="center" prop="mobilePhone" />
-      <af-table-column label="积分余额" align="center" prop="blogNickName" />
-      <af-table-column
-        label="核销员手机号"
-        align="center"
-        prop="verificationUserPhone"
-      />
-      <af-table-column
-        label="优惠券截止时间"
-        align="center"
-        prop="couponEffectiveTime"
+
+    <!--主要表格-->
+    <div>
+      <el-table
+        :data="importList"
+        @selection-change="selectionChange"
+        class="mt-5"
       >
-        <template slot-scope="scope">
-          <span>{{
-            parseTime(scope.row.couponEffectiveTime, "{y}-{m}-{d} {h}:{i}:{s}")
-          }}</span>
-        </template>
-      </af-table-column>
-    </el-table>
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </div>
+        <af-table-column align="center" prop="id" type="selection" />
+        <af-table-column label="手机" align="center" prop="phoneNumber" />
+        <af-table-column label="积分" align="center" prop="integral" />
+        <af-table-column
+          label="电子卡类型"
+          align="center"
+          prop="memberGrade"
+          width="160px"
+        >
+          <template slot-scope="scope">
+            {{ translateCardToName(scope.row.cardType) }}
+          </template>
+        </af-table-column>
+        <af-table-column label="电子卡余额" align="center" prop="balance" />
+        <af-table-column
+          label="会员等级"
+          align="center"
+          prop="memberGrade"
+          width="160px"
+        >
+          <template slot-scope="scope">
+            {{ translateGradeToName(scope.row.memberGrade) }}
+          </template>
+        </af-table-column>
+        <af-table-column label="等级操作" align="center">
+          <template slot-scope="scope">
+            <el-dropdown @command="toGrade">
+              <span class="el-dropdown-link" style="font-size: 12px">
+                强拉到指定等级<i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item
+                  :command="scope.row.phoneNumber + '.' + ele.id"
+                  v-for="ele in gradeList"
+                  :key="ele.id"
+                  >{{ ele.grade }}</el-dropdown-item
+                >
+              </el-dropdown-menu>
+            </el-dropdown>
+            <el-popconfirm
+              title="此操作会将选中用户强制列为无标签状态，是否继续？"
+              confirm-button-text="删除"
+              @onConfirm="toUnGrade(scope.row.phoneNumber)"
+            >
+              <el-button
+                type="text"
+                icon="el-icon-circle-plus-outline"
+                class="underline btn24"
+                size="mini"
+                slot="reference"
+                >拉出等级</el-button
+              >
+            </el-popconfirm>
+          </template>
+        </af-table-column>
+        <af-table-column
+          label="标签"
+          align="center"
+          prop="labelId"
+          width="160px"
+        >
+          <template slot-scope="scope">
+            {{ translateLabelToName(scope.row.labelId) }}
+          </template>
+        </af-table-column>
+        <af-table-column label="标签操作" align="center">
+          <template slot-scope="scope">
+            <el-dropdown @command="toLabel">
+              <span class="el-dropdown-link" style="font-size: 12px">
+                强拉到指定标签<i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item
+                  :command="scope.row.phoneNumber + '.' + ele.id"
+                  v-for="ele in labelList"
+                  :key="ele.id"
+                  >{{ ele.labelName }}</el-dropdown-item
+                >
+              </el-dropdown-menu>
+            </el-dropdown>
+            <el-popconfirm
+              title="此操作会将选中用户强制列为无标签状态，是否继续？"
+              confirm-button-text="删除"
+              @onConfirm="toUnLabel(scope.row.phoneNumber)"
+            >
+              <el-button
+                type="text"
+                icon="el-icon-circle-plus-outline"
+                class="underline btn24"
+                size="mini"
+                slot="reference"
+                >拉出标签</el-button
+              >
+            </el-popconfirm>
+          </template>
+        </af-table-column>
+        <af-table-column
+          label="优惠券领取方式"
+          align="center"
+          prop="couponIssueId"
+          width="160px"
+        >
+          <template slot-scope="scope">
+            {{ translateIssueToName(scope.row.couponIssueId) }}
+          </template>
+        </af-table-column>
+        <af-table-column label="领取方式操作" align="center">
+          <template slot-scope="scope">
+            <el-dropdown @command="toIssue">
+              <span class="el-dropdown-link" style="font-size: 12px">
+                强拉到指定领取<i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item
+                  :command="scope.row.phoneNumber + '.' + ele.id"
+                  v-for="ele in issueList"
+                  :key="ele.id"
+                  >{{ ele.issueRemark }}</el-dropdown-item
+                >
+              </el-dropdown-menu>
+            </el-dropdown>
+            <el-popconfirm
+              title="此操作会将选中用户强制列为无标签状态，是否继续？"
+              confirm-button-text="删除"
+              @onConfirm="toUnIssue(scope.row.phoneNumber)"
+            >
+              <el-button
+                type="text"
+                icon="el-icon-circle-plus-outline"
+                class="underline btn24"
+                size="mini"
+                slot="reference"
+                >拉出领取</el-button
+              >
+            </el-popconfirm>
+          </template>
+        </af-table-column>
+      </el-table>
+      <pagination
+        v-show="total > 1"
+        :total="total"
+        :pageSizes="[10, 50, 100, 200]"
+        :page.sync="queryForm.pageNum"
+        :limit.sync="queryForm.pageSize"
+        @pagination="getList"
+      />
+    </div>
+
+    <!--拉入前提示框-->
+    <el-dialog
+      :title="'强拉入' + handleTypeName[handleType]"
+      :visible.sync="confirmDialog"
+      width="750px"
+      append-to-body
+    >
+      <div class="ml-5">
+        无论当前用户此刻是否已经有{{ handleTypeName[handleType] }}，
+        点击确认按钮后，会立刻将选中用户拉入新的
+        {{ handleTypeName[handleType] }}~
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="handleSubmitLable" size="small"
+          >确 定</el-button
+        >
+        <el-button @click="cancelSubmitLabel" size="small">取 消</el-button>
+      </div>
+    </el-dialog>
+    <!--导入 表格反馈-->
+    <el-dialog
+      :title="'结果反馈'"
+      :visible.sync="tipOpen"
+      width="600px"
+      append-to-body
+      status-icon
+    >
+      <div v-html="tipContent">
+        {{ tipContent }}
+      </div>
+    </el-dialog>
+
+    <!-- 新增单条导入 -->
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="600px"
+      append-to-body
+      status-icon
+    >
+      <el-form ref="createForm" :model="createForm" label-width="180px">
+        <el-form-item
+          label="手机号"
+          prop="phoneNumber"
+          :rules="{
+            required: true,
+            message: '手机号不能为空',
+            trigger: 'blur',
+          }"
+        >
+          <input
+            type="text"
+            class="form-control"
+            v-model="createForm.phoneNumber"
+            style="width: 180px"
+          />
+        </el-form-item>
+        <el-form-item label="积分余额" prop="integral">
+          <input
+            type="text"
+            class="form-control"
+            v-model.number="createForm.integral"
+            style="width: 180px"
+          />
+        </el-form-item>
+        <el-form-item label="电子卡类型" prop="cardType">
+          <el-radio-group v-model="createForm.cardType">
+            <div>
+              <el-radio label="1">汽油卡</el-radio>
+              <el-radio label="2">柴油卡</el-radio>
+            </div>
+            <div>
+              <el-radio label="3">LNG卡</el-radio>
+              <el-radio label="4">CNG卡</el-radio>
+            </div>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="电子卡余额" prop="balance">
+          <input
+            type="text"
+            class="form-control"
+            v-model.number="createForm.balance"
+            style="width: 180px"
+          />
+        </el-form-item>
+        <el-form-item label="等级" prop="memberGrade">
+          <el-select v-model="createForm.memberGrade" placeholder="请选择">
+            <el-option :label="'暂不选择'" :value="''"> </el-option>
+            <el-option
+              v-for="ele in gradeList"
+              :key="ele.id"
+              :label="ele.grade"
+              :value="ele.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="标签" prop="labelId">
+          <el-select v-model="createForm.labelId" placeholder="请选择">
+            <el-option :label="'暂不选择'" :value="''"> </el-option>
+            <el-option
+              v-for="ele in labelList"
+              :key="ele.id"
+              :label="ele.labelName"
+              :value="ele.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="优惠券领取方式" prop="couponIssueId">
+          <el-select v-model="createForm.couponIssueId" placeholder="请选择">
+            <el-option :label="'暂不选择'" :value="''"> </el-option>
+            <el-option
+              v-for="ele in issueList"
+              :key="ele.id"
+              :label="ele.issueRemark"
+              :value="ele.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </PermissionContainer>
 </template>
+
 <script>
-import { listOrder, exportOrder, printOrderInfo } from "@/api/station/order";
-import { stationinfo } from "@/api/station/gun";
-import { listPrice, getPrice } from "@/api/station/price";
-import { queryCouponUserList } from "@/api/coupon";
-import { listManage } from "@/api/station/manage";
+import {
+  getLabelUser,
+  // getLabelList,
+  delUserLabel,
+} from "@/api/label/label";
+
+import {
+  getIssueList,
+  getGradeList,
+  getLabelList,
+  importExcel,
+  getImportList,
+} from "@/api/preData";
 
 export default {
-  name: "coupon_user",
+  name: "Dzk_Bill",
   data() {
     return {
-      //创建订单时间间隔
-      dateRangeCreatedDate: [],
-      // 总条数
-      total: 0,
-      // 优惠券的信息
-      couponUserList: [],
-      oilNameOptions: [],
-      // 字典
-      payTypeOptions: [],
-      // 下拉油站
-      stationOptions: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        levelId: this.levelId,
+      queryForm: {
         pageNum: 1,
         pageSize: 10,
-        issueId: null,
-        couponId: null,
-        stationId: null,
-        couponIsUsed: null,
-        couponIsEffective: null,
-        getCouponTime: null,
-        verificationUserPhone: null,
       },
-      // 表单校验
-      rules: {},
-      reprint: false,
+      tipOpen: false,
+      tipContent: "",
+      title: "",
+      open: false,
+      // 总条数
+      total: 0,
+      importList: [],      
+      selectedImport: [],
+      confirmDialog: false,
+      createForm: {
+        phoneNumber: "",
+        integral: 0,
+        cardType: "1",
+        balance: 0,
+        memberGrade: "",
+        labelId: "",
+        couponIssueId: "",
+      },
+      issueList: [],
+      labelList: [],
+      gradeList: [],
+      handleTypeName: ["等级", "标签", "优惠券领取方式"],
+      handleType: 1, // 0 等级 1 标签 2 优惠券领取方式
+      tempId: "",
+      tempArr: [],
     };
   },
+  computed: {},
   created() {
-    this.getList();
-  },
+    this.init();
 
+    
+  },
   methods: {
-    /** 查询订单支付列表 */
-    getList() {
-      this.queryParams.levelId = this.levelId;
-      queryCouponUserList(
-        this.addDateRange(this.queryParams, this.dateRangeCreatedDate)
-      ).then((response) => {
-        this.couponUserList = response.rows;
-        this.total = response.total;
+    init() {
+      this.getList();
+      getIssueList()
+        .then((res) => {
+          if (res.code == 200) {
+            if (res.rows == null) {
+              this.issueList = [];
+            } else {
+              this.issueList = res.rows;
+            }
+          } else {
+            throw new Error("");
+          }
+        })
+        .catch((err) => {
+          this.msgError("拉取优惠券领取方式失败~");
+        });
+      getLabelList()
+        .then((res) => {
+          if (res.code == 200) {
+            if (res.rows == null) {
+              this.labelList = [];
+            } else {
+              this.labelList = res.rows;
+            }
+          } else {
+            throw new Error("");
+          }
+        })
+        .catch((err) => {
+          this.msgError("拉取标签列表失败~");
+        });
+      getGradeList()
+        .then((res) => {
+          if (res.code == 200) {
+            if (res.rows == null) {
+              this.gradeList = [];
+            } else {
+              this.gradeList = res.rows;
+            }
+          } else {
+            throw new Error("");
+          }
+        })
+        .catch((err) => {
+          this.msgError("拉取等级列表失败~");
+        });
+    },
+    translateIssueToName(id) {
+      const issue = this.issueList.find((ele) => {
+        return ele.id == id;
+      });
+      if (issue == undefined) {
+        return "----";
+      }
+      return issue.issueRemark;
+    },
+    translateGradeToName(id) {
+      const grade = this.gradeList.find((ele) => {
+        return ele.id == id;
+      });
+      if (grade == undefined) {
+        return "----";
+      }
+      return grade.grade;
+    },
+    translateLabelToName(id) {
+      const label = this.labelList.find((ele) => {
+        return ele.id == id;
+      });
+      if (label == undefined) {
+        return "----";
+      }
+      return label.labelName;
+    },
+    translateCardToName(id) {
+      const typeObj = {
+        1: "汽油卡",
+        2: "柴油卡",
+        3: "LNG卡",
+        4: "CNG卡",
+      };
+
+      const type = typeObj[id];
+      if (type == undefined) {
+        return "----";
+      }
+      return type;
+    },
+    submitForm() {
+      this.$refs["createForm"].validate((valid) => {
+        if (valid) {
+          importExcel([this.createForm]).then((res) => {
+            console.log("res111111111", res);
+            this.tipOpen = true;
+            this.tipContent = res.msg;
+          });
+        }
+      });
+    },
+    cancel() {
+      this.open = false;
+    },
+    batchAdd() {},
+    handleAdd() {
+      this.title = "新增数据";
+      this.createForm = {
+        phoneNumber: "",
+        integral: 0,
+        cardType: "1",
+        balance: 0,
+        memberGrade: "",
+        labelId: "",
+        couponIssueId: "",
+      };
+      this.open = true;
+    },
+
+    handleSubmitLable() {
+      const subArr = [];
+      console.log("拉入的type", this.handleType);
+      console.log("拉入的id", this.tempId);
+      console.log("拉入的人员", this.tempArr);
+    },
+    cancelSubmitLabel() {
+      this.getList();
+      this.confirmDialog = false;
+    },
+    translationLabel(id) {
+      const label = this.labelList.find((ele) => {
+        return id == ele.id;
       });
+      if (label == undefined) {
+        return "";
+      }
+      return label.labelName;
+    },
+    toUnGrade(phone) {
+      const delArr = [];
+      if (this.selectedImport.length == 0) {
+        delArr.push(phone);
+      } else {
+        this.selectedImport.map((ele) => {
+          if (!!ele.phoneNumber) {
+            delArr.push(ele.phoneNumber);
+          }
+        });
+      }
+      console.log("删除的类型", 0);
+      console.log("删除的人的手机号", delArr);
+      // delUserLabel({ phoneList: delArr })
+      //   .then((res) => {
+      //     if (res.code == 200) {
+      //       this.getList();
+      //       this.msgSuccess("删除用户标签成功~");
+      //     } else {
+      //       throw new Error("");
+      //     }
+      //   })
+      //   .catch(() => {
+      //     this.msgError("删除用户标签状态失败，请刷新后重试~");
+      //   });
+    },
+    toUnLabel(phone) {
+      const delArr = [];
+      if (this.selectedImport.length == 0) {
+        delArr.push(phone);
+      } else {
+        this.selectedImport.map((ele) => {
+          if (!!ele.phoneNumber) {
+            delArr.push(ele.phoneNumber);
+          }
+        });
+      }
+      console.log("删除的类型", 1);
+      console.log("删除的人的手机号", delArr);
+    },
+    toUnIssue(phone) {
+      const delArr = [];
+      if (this.selectedImport.length == 0) {
+        delArr.push(phone);
+      } else {
+        this.selectedImport.map((ele) => {
+          if (!!ele.phoneNumber) {
+            delArr.push(ele.phoneNumber);
+          }
+        });
+      }
+      console.log("删除的类型", 2);
+      console.log("删除的人的手机号", delArr);
+    },
+
+    selectionChange(selection) {
+      console.log("selectionChange", selection);
+
+      this.selectedImport = selection;
+    },
+    usageTypeFotmat(row, column) {
+      if (row.usageType === "+") {
+        return "充值";
+      } else if (row.usageType === "-") {
+        return "消费";
+      }
+    },
+    cardOilsTypeFotmat(row, column) {
+      if (row.cardOilsType === "1") {
+        return "汽油";
+      } else if (row.cardOilsType === "2") {
+        return "柴油";
+      } else if (row.cardOilsType === "3") {
+        return "非油品";
+      } else if (row.cardOilsType === "4") {
+        return "LNG";
+      } else if (row.cardOilsType === "5") {
+        return "CNG";
+      }
+    },
+    /** 查询客户电子会员卡充值消费记录列表 */
+    getList() {
+      getImportList()
+        .then((res) => {
+          if (res.rows == null) {
+            this.importList = [];
+          } else {
+            this.importList = res.rows;
+          }
+        })
+        .catch((err) => {
+          this.msgError("拉取导入的数据列表失败");
+        });
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
+      this.queryForm.pageNum = 1;
       this.getList();
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.dateRangeCreatedDate = [];
       this.resetForm("queryForm");
       this.handleQuery();
     },
+    toGrade(phoneAndId) {
+      const phoneAndIdArr = phoneAndId.match(/\d{1,}/g);
+      const phone = phoneAndIdArr[0];
+      const id = phoneAndIdArr[1];
 
-    /** 导出按钮操作 */
-    handleExport() {
-      const queryParams = this.queryParams;
-      this.$confirm("是否确认导出所有订单支付数据项?", "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(function () {
-          return exportOrder(queryParams);
-        })
-        .then((response) => {
-          this.download(response.msg);
+      if (!id || !phone) {
+        this.msgError("强拉等级失败，刷新重试~");
+        return;
+      }
+
+      if (this.selectedImport.length == 0) {
+        this.tempArr = [phone];
+      } else {
+        this.tempArr = [];
+        this.selectedImport.map((ele) => {
+          this.tempArr.push(ele.phoneNumber);
+        });
+      }
+
+      this.handleType = 0;
+      this.tempId = id;
+
+      this.confirmDialog = true;
+    },
+    toLabel(phoneAndId) {
+      const phoneAndIdArr = phoneAndId.match(/\d{1,}/g);
+      const phone = phoneAndIdArr[0];
+      const id = phoneAndIdArr[1];
+
+      if (!id || !phone) {
+        this.msgError("强拉标签失败，刷新重试~");
+        return;
+      }
+
+      if (this.selectedImport.length == 0) {
+        this.tempArr = [phone];
+      } else {
+        this.tempArr = [];
+        this.selectedImport.map((ele) => {
+          this.tempArr.push(ele.phoneNumber);
+        });
+      }
+
+      this.handleType = 1;
+      this.tempId = id;
+
+      this.confirmDialog = true;
+    },
+    toIssue(phoneAndId) {
+      const phoneAndIdArr = phoneAndId.match(/\d{1,}/g);
+      const phone = phoneAndIdArr[0];
+      const id = phoneAndIdArr[1];
+
+      if (!id || !phone) {
+        this.msgError("强拉标签失败，刷新重试~");
+        return;
+      }
+
+      if (this.selectedImport.length == 0) {
+        this.tempArr = [phone];
+      } else {
+        this.tempArr = [];
+        this.selectedImport.map((ele) => {
+          this.tempArr.push(ele.phoneNumber);
         });
+      }
+
+      this.handleType = 2;
+      this.tempId = id;
+
+      this.confirmDialog = true;
     },
   },
 };
 </script>
+<style scoped lang="scss">
+.app-container {
+  .container {
+    .row {
+      margin-bottom: 10px;
+    }
+  }
+}
+.el-dropdown-link {
+  cursor: pointer;
+  color: #409eff;
+}
+.el-icon-arrow-down {
+  font-size: 12px;
+}
+</style>