Przeglądaj źródła

油站配置初步

Joe 4 lat temu
rodzic
commit
3d8739cf11

+ 305 - 0
src/views/station/configuration/applet .vue

@@ -0,0 +1,305 @@
+<template>
+  <div class="app-container">
+    <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
+      <el-table-column v-if="false" label="自增主键id" align="center"  prop="deptId" />
+      <el-table-column label="油站名称" align="center" prop="deptName" />
+      <el-table-column label="油站地址" align="center" prop="deptAddress" />
+      <el-table-column label="联系人" align="center" prop="leader" />
+      <el-table-column label="电话" align="center" prop="phone" />
+      <el-table-column v-if="false" label="集团id"  align="center" prop="stationGroupId" />
+      <el-table-column v-if="false" label="集团名称" align="center" prop="stationGroupName" />
+      <el-table-column v-if="false" label="油站照片" align="center" prop="stationPic" />
+      <el-table-column label="油站经度" align="center" prop="stationLongitude" />
+      <el-table-column label="油站纬度" align="center" prop="stationLatitude" />
+      <el-table-column label="商户编码" align="center" prop="mno" />
+      <el-table-column label="操作" align="c--enter" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['station:info:edit']"
+          >修改</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改油站信息对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
+        <el-form-item label="油站形象照" prop="stationPic">
+          <el-upload
+            class="avatar-uploader"
+            :action="addressUrl"
+            :show-file-list="false"
+            :headers="headers"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload">
+            <img v-if="form.stationPic" :src="form.stationPic" style="width:150px;height: 150px;" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            <div class="el-upload__tip" slot="tip">点击图片重新上传,只能上传jpg/png文件,图片大小不超过2M</div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="油站名称" prop="deptName">
+          <el-input v-model="form.deptName" placeholder="请输入油站名称" />
+        </el-form-item>
+        <el-form-item label="油站地址" prop="deptAddress">
+          <el-input v-model="form.deptAddress" placeholder="请输入油站地址" />
+        </el-form-item>
+        <el-form-item label="联系人" prop="leader">
+          <el-input v-model="form.leader" placeholder="请输入联系人" />
+        </el-form-item>
+        <el-form-item label="电话" prop="phone">
+          <el-input v-model="form.phone" placeholder="请输入电话" />
+        </el-form-item>
+        <el-form-item label="油站经度" prop="stationLongitude">
+          <el-input v-model="form.stationLongitude" :disabled="true" placeholder="请输入油站经度" />
+        </el-form-item>
+        <el-form-item label="油站纬度" prop="stationLatitude">
+          <el-input v-model="form.stationLatitude"  :disabled="true" placeholder="请输入油站纬度" />
+        </el-form-item>
+        <el-form-item label="商户编码" prop="mno">
+          <el-input v-model="form.mno" :disabled="true"  placeholder="请输入商户编码" />
+        </el-form-item>
+        <el-form-item label="小程序appid" prop="appId">
+          <el-input v-model="form.appId" :disabled="true"  placeholder="小程序appid" />
+        </el-form-item>
+        <el-form-item label="小程序appSecret" prop="appSecret">
+          <el-input v-model="form.appSecret" :disabled="true"  placeholder="小程序appSecret" />
+        </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>
+  </div>
+</template>
+
+<script>
+import { listInfo, getInfo, delInfo, addInfo, updateInfo, exportInfo } from "@/api/station/info";
+import { getToken } from "@/utils/auth";
+import { treeselect } from "@/api/system/dept";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+export default {
+  name: "Info",
+  components: { Treeselect },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 油站信息表格数据
+      infoList: [],
+      // 部门树选项
+      deptOptions: undefined,
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        stationName: null,
+        deptAddress: null,
+        oilGunNum: null,
+        contacts: null, 
+        phone: null,
+        stationGroupName: null,
+        stationPic: null,
+        stationLongitude: null,
+        stationLatitude: null,
+        mno: null,
+        deptId:null
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      },
+      imageUrl: '',
+      headers: { Authorization: "Bearer " + getToken() },
+      addressUrl: location.protocol+"//"+location.host+ process.env.VUE_APP_BASE_API+"/common/upload"
+    };
+  },
+  created() {
+    this.getList();
+    this.getTreeselect();
+  },
+
+  methods: {
+    /** 查询油站信息列表 */
+    getList() {
+      this.loading = true;
+      this.queryParams.deptId= this.$store.selectDeptId;
+      if(this.queryParams.deptId==null || this.queryParams.deptId==""){
+        this.queryParams.deptId =this.$store.state.user.deptId;
+      }
+      listInfo(this.queryParams).then(response => {
+        this.infoList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    getTreeselect() {
+      treeselect().then(response => {
+        this.deptOptions = response.data;
+      });
+    },
+
+    // 获取当前选中部门的名称
+    selectDepart(val) {
+      this.form.stationGroupName=val.label;
+    },
+
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        deptId: null,
+        deptName: null,
+        deptAddress: null,
+        oilGunNum: null,
+        contacts: null,
+        phone: null,
+        stationGroupId: null,
+        stationGroupName: null,
+        stationPic: null,
+        stationLongitude: null,
+        stationLatitude: null,
+        mno: null,
+        deptId:null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.stationId)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加油站信息";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const deptId = row.deptId || this.ids
+      getInfo(deptId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改油站信息";
+      });
+      // this.upload.fileList = [{ name: this.form.fileName, url: this.form.filePath }];
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.deptId != null) {
+            updateInfo(this.form).then(response => {
+              this.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const stationIds = row.deptId || this.ids;
+      this.$confirm('是否确认删除油站信息', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function() {
+        return delInfo(stationIds);
+      }).then(() => {
+        this.getList();
+        this.msgSuccess("删除成功");
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$confirm('是否确认导出所有油站信息数据项?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function() {
+        return exportInfo(queryParams);
+      }).then(response => {
+        this.download(response.msg);
+      })
+    },
+    // 文件提交处理
+    submitUpload() {
+      this.$refs.upload.submit();
+    },
+// 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      this.upload.isUploading = true;
+    },
+// 文件上传成功处理++ =
+    handleFileSuccess(response, file, fileList) {
+      this.upload.isUploading = false;
+      let imgurl=location.protocol+"//"+location.host+process.env.VUE_APP_BASE_API+response.fileName;
+      this.form.stationPic = imgurl;
+      this.msgSuccess(response.msg);
+    },
+    handleAvatarSuccess(res, file) {
+      let imgurl=location.protocol+"//"+location.host+process.env.VUE_APP_BASE_API+res.fileName;
+      this.form.stationPic = imgurl;
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg';
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isJPG) {
+        this.$message.error('上传头像图片只能是 JPG 格式!');
+      }
+      if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 2MB!');
+      }
+      return isJPG && isLt2M;
+    }
+  }
+};
+</script>

+ 4 - 4
src/views/station/configuration.vue → src/views/station/configuration/index.vue

@@ -4,16 +4,16 @@
       <el-tab-pane label="油站信息" name="info" :key="'info'">
         <child1></child1>
       </el-tab-pane>
-      <el-tab-pane label="支付配置" name="pay" :key="'pay'">
+      <el-tab-pane label="小程序配置" name="pay" :key="'pay'">
         <child2></child2>
       </el-tab-pane>
     </el-tabs>
   </div>
 </template>
 <script>
-  import tabZujianChild1 from './info/index.vue'
-  import tabZujianChild2 from './pay/index.vue'
-  import tabZujianChild3 from './manage/index.vue'
+  import tabZujianChild1 from './info.vue'
+  import tabZujianChild2 from '../pay/index.vue'
+  import tabZujianChild3 from '../manage/index.vue'
   export default {
     name: 'configuration',
     components:{

+ 434 - 0
src/views/station/configuration/info.vue

@@ -0,0 +1,434 @@
+<template>
+  <div class="app-container">
+    <el-row>
+      <el-col :span="24">
+        <el-card :body-style="{ padding: '20px', margin: '0 auto'}">
+          <div class="imgbox">
+            <img
+              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+              class="image"
+              style="margin: 0 auto"
+            />
+          </div>
+
+          <el-form ref="form" :model="form" :rules="rules" label-width="auto" width="">
+            <el-form-item label="油站名称" prop="deptName">
+              <el-input v-model="form.deptName" placeholder="请输入油站名称" />
+            </el-form-item>
+            <el-form-item label="油站地址" prop="deptAddress">
+              <el-input
+                v-model="form.deptAddress"
+                placeholder="请输入油站地址"
+              />
+            </el-form-item>
+            <el-form-item label="联系人" prop="leader">
+              <el-input v-model="form.leader" placeholder="请输入联系人" />
+            </el-form-item>
+            <el-form-item label="电话" prop="phone">
+              <el-input v-model="form.phone" placeholder="请输入电话" />
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="infoList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column
+        v-if="false"
+        label="自增主键id"
+        align="center"
+        prop="deptId"
+      />
+      <el-table-column label="油站名称" align="center" prop="deptName" />
+      <el-table-column label="油站地址" align="center" prop="deptAddress" />
+      <el-table-column label="联系人" align="center" prop="leader" />
+      <el-table-column label="电话" align="center" prop="phone" />
+      <el-table-column
+        v-if="false"
+        label="集团id"
+        align="center"
+        prop="stationGroupId"
+      />
+      <el-table-column
+        v-if="false"
+        label="集团名称"
+        align="center"
+        prop="stationGroupName"
+      />
+      <el-table-column
+        v-if="false"
+        label="油站照片"
+        align="center"
+        prop="stationPic"
+      />
+      <el-table-column
+        label="油站经度"
+        align="center"
+        prop="stationLongitude"
+      />
+      <el-table-column label="油站纬度" align="center" prop="stationLatitude" />
+      <el-table-column label="商户编码" align="center" prop="mno" />
+      <el-table-column
+        label="操作"
+        align="c--enter"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            >修改</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改油站信息对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
+        <el-form-item label="油站形象照" prop="stationPic">
+          <el-upload
+            class="avatar-uploader"
+            :action="addressUrl"
+            :show-file-list="false"
+            :headers="headers"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload"
+          >
+            <img
+              v-if="form.stationPic"
+              :src="form.stationPic"
+              style="width: 150px; height: 150px"
+              class="avatar"
+            />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            <div class="el-upload__tip" slot="tip">
+              点击图片重新上传,只能上传jpg/png文件,图片大小不超过2M
+            </div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="油站名称" prop="deptName">
+          <el-input v-model="form.deptName" placeholder="请输入油站名称" />
+        </el-form-item>
+        <el-form-item label="油站地址" prop="deptAddress">
+          <el-input v-model="form.deptAddress" placeholder="请输入油站地址" />
+        </el-form-item>
+        <el-form-item label="联系人" prop="leader">
+          <el-input v-model="form.leader" placeholder="请输入联系人" />
+        </el-form-item>
+        <el-form-item label="电话" prop="phone">
+          <el-input v-model="form.phone" placeholder="请输入电话" />
+        </el-form-item>
+        <el-form-item label="油站经度" prop="stationLongitude">
+          <el-input
+            v-model="form.stationLongitude"
+            :disabled="true"
+            placeholder="请输入油站经度"
+          />
+        </el-form-item>
+        <el-form-item label="油站纬度" prop="stationLatitude">
+          <el-input
+            v-model="form.stationLatitude"
+            :disabled="true"
+            placeholder="请输入油站纬度"
+          />
+        </el-form-item>
+        <el-form-item label="商户编码" prop="mno">
+          <el-input
+            v-model="form.mno"
+            :disabled="true"
+            placeholder="请输入商户编码"
+          />
+        </el-form-item>
+        <el-form-item label="小程序appid" prop="appId">
+          <el-input
+            v-model="form.appId"
+            :disabled="true"
+            placeholder="小程序appid"
+          />
+        </el-form-item>
+        <el-form-item label="小程序appSecret" prop="appSecret">
+          <el-input
+            v-model="form.appSecret"
+            :disabled="true"
+            placeholder="小程序appSecret"
+          />
+        </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>
+  </div>
+</template>
+
+<script>
+import {
+  listInfo,
+  getInfo,
+  delInfo,
+  addInfo,
+  updateInfo,
+  exportInfo,
+} from "@/api/station/info";
+import { getToken } from "@/utils/auth";
+import { treeselect } from "@/api/system/dept";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+export default {
+  name: "Info",
+  components: { Treeselect },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 油站信息表格数据
+      infoList: [],
+      // 部门树选项
+      deptOptions: undefined,
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        stationName: null,
+        deptAddress: null,
+        oilGunNum: null,
+        contacts: null,
+        phone: null,
+        stationGroupName: null,
+        stationPic: null,
+        stationLongitude: null,
+        stationLatitude: null,
+        mno: null,
+        deptId: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {},
+      imageUrl: "",
+      headers: { Authorization: "Bearer " + getToken() },
+      addressUrl:
+        location.protocol +
+        "//" +
+        location.host +
+        process.env.VUE_APP_BASE_API +
+        "/common/upload",
+    };
+  },
+  created() {
+    this.getList();
+    this.getTreeselect();
+  },
+
+  methods: {
+    /** 查询油站信息列表 */
+    getList() {
+      this.loading = true;
+      this.queryParams.deptId = this.$store.selectDeptId;
+      if (this.queryParams.deptId == null || this.queryParams.deptId == "") {
+        this.queryParams.deptId = this.$store.state.user.deptId;
+      }
+      listInfo(this.queryParams).then((response) => {
+        this.infoList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    getTreeselect() {
+      treeselect().then((response) => {
+        this.deptOptions = response.data;
+      });
+    },
+
+    // 获取当前选中部门的名称
+    selectDepart(val) {
+      this.form.stationGroupName = val.label;
+    },
+
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        deptId: null,
+        deptName: null,
+        deptAddress: null,
+        oilGunNum: null,
+        contacts: null,
+        phone: null,
+        stationGroupId: null,
+        stationGroupName: null,
+        stationPic: null,
+        stationLongitude: null,
+        stationLatitude: null,
+        mno: null,
+        deptId: null,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.stationId);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加油站信息";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const deptId = row.deptId || this.ids;
+      getInfo(deptId).then((response) => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改油站信息";
+      });
+      // this.upload.fileList = [{ name: this.form.fileName, url: this.form.filePath }];
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.deptId != null) {
+            updateInfo(this.form).then((response) => {
+              this.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const stationIds = row.deptId || this.ids;
+      this.$confirm("是否确认删除油站信息", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(function () {
+          return delInfo(stationIds);
+        })
+        .then(() => {
+          this.getList();
+          this.msgSuccess("删除成功");
+        });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$confirm("是否确认导出所有油站信息数据项?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(function () {
+          return exportInfo(queryParams);
+        })
+        .then((response) => {
+          this.download(response.msg);
+        });
+    },
+    // 文件提交处理
+    submitUpload() {
+      this.$refs.upload.submit();
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      this.upload.isUploading = true;
+    },
+    // 文件上传成功处理++ =
+    handleFileSuccess(response, file, fileList) {
+      this.upload.isUploading = false;
+      let imgurl =
+        location.protocol +
+        "//" +
+        location.host +
+        process.env.VUE_APP_BASE_API +
+        response.fileName;
+      this.form.stationPic = imgurl;
+      this.msgSuccess(response.msg);
+    },
+    handleAvatarSuccess(res, file) {
+      let imgurl =
+        location.protocol +
+        "//" +
+        location.host +
+        process.env.VUE_APP_BASE_API +
+        res.fileName;
+      this.form.stationPic = imgurl;
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === "image/jpeg";
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isJPG) {
+        this.$message.error("上传头像图片只能是 JPG 格式!");
+      }
+      if (!isLt2M) {
+        this.$message.error("上传头像图片大小不能超过 2MB!");
+      }
+      return isJPG && isLt2M;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+  .imgbox{
+    width: 50%;
+    height:300px;
+    margin: 0 auto;
+    padding:20px;
+    img{
+      width:100%;
+      height:100%;
+    }
+  }
+</style>