总后台直播前端页面展示修改

src/views/live/liveAnchor/index.vue

@@ -1,69 +1,95 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="昵称" prop="nickName">
-        <el-input
-          v-model="queryParams.nickName"
-          placeholder="请输入昵称"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="密码" prop="password">
-        <el-input
-          v-model="queryParams.password"
-          placeholder="请输入密码"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="手机号" prop="mobile">
-        <el-input
-          v-model="queryParams.mobile"
-          placeholder="请输入手机号"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="微信OPENID" prop="openId">
-        <el-input
-          v-model="queryParams.openId"
-          placeholder="请输入微信OPENID"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="身份证反面" prop="idCardBackUrl">
-        <el-input
-          v-model="queryParams.idCardBackUrl"
-          placeholder="请输入身份证反面"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="身份证正面" prop="idCardFrontUrl">
-        <el-input
-          v-model="queryParams.idCardFrontUrl"
-          placeholder="请输入身份证正面"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="状态  1正常 0禁用" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择状态  1正常 0禁用" clearable size="small">
-          <el-option label="请选择字典生成" value="" />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
+      <el-row :gutter="10">
+        <el-col :span="6">
+          <el-form-item label="昵称" prop="nickName">
+            <el-input
+              v-model="queryParams.nickName"
+              placeholder="请输入昵称"
+              clearable
+              size="small"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="密码" prop="password">
+            <el-input
+              v-model="queryParams.password"
+              placeholder="请输入密码"
+              clearable
+              size="small"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="手机号" prop="mobile">
+            <el-input
+              v-model="queryParams.mobile"
+              placeholder="请输入手机号"
+              clearable
+              size="small"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="微信OPENID" prop="openId">
+            <el-input
+              v-model="queryParams.openId"
+              placeholder="请输入微信OPENID"
+              clearable
+              size="small"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="10">
+      <el-col :span="6">
+        <el-form-item label="身份证反面" prop="idCardBackUrl">
+          <el-input
+            v-model="queryParams.idCardBackUrl"
+            placeholder="请输入身份证反面"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="身份证正面" prop="idCardFrontUrl">
+          <el-input
+            v-model="queryParams.idCardFrontUrl"
+            placeholder="请输入身份证正面"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
+<!--            <el-option label="请选择字典生成" value="" />-->
+            <el-option
+              v-for="dict in statusOptions"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-col>
+    </el-row>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
@@ -122,7 +148,7 @@
       <el-table-column label="微信OPENID" align="center" prop="openId" />
       <el-table-column label="身份证反面" align="center" prop="idCardBackUrl" />
       <el-table-column label="身份证正面" align="center" prop="idCardFrontUrl" />
-      <el-table-column label="状态  1正常 0禁用" align="center" prop="status" />
+      <el-table-column label="状态" align="center" prop="status" :formatter="anchorStatusFormatter"/>
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -173,9 +199,9 @@
         <el-form-item label="身份证正面" prop="idCardFrontUrl">
           <el-input v-model="form.idCardFrontUrl" placeholder="请输入身份证正面" />
         </el-form-item>
-        <el-form-item label="状态  1正常 0禁用">
+        <el-form-item label="状态">
           <el-radio-group v-model="form.status">
-            <el-radio label="1">请选择字典生成</el-radio>
+            <el-radio :label="item.dictValue" v-for="item in statusOptions" >{{item.dictLabel}}</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
@@ -197,6 +223,8 @@ export default {
   name: "LiveAnchor",
   data() {
     return {
+      //字典
+      statusOptions: [],
       // 遮罩层
       loading: true,
       // 导出遮罩层
@@ -238,6 +266,9 @@ export default {
   },
   created() {
     this.getList();
+    this.getDicts("sys_live_anchor_status").then(response => {
+      this.statusOptions = response.data;
+    });
   },
   methods: {
     /** 查询主播列表 */
@@ -357,3 +388,12 @@ export default {
   }
 };
 </script>
+<style >
+.el-form-item__label {
+  width: 120px !important;
+}
+.el-input {
+  width: 80% !important;
+}
+
+</style>

src/views/live/liveGoods/index.vue

@@ -55,9 +55,10 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="状态 1上架 0下架" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择状态 1上架 0下架" clearable size="small">
-          <el-option label="请选择字典生成" value="" />
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
+<!--          <el-option label="请选择字典生成" value="" />-->
+          <el-option v-for="(item,index) in goodsStatusOptions" :key="item.dictValue+index" :label="item.dictLabel" :value="item.dictValue" />
         </el-select>
       </el-form-item>
       <el-form-item label="库存表" prop="stock">
@@ -141,7 +142,7 @@
       <el-table-column label="组图" align="center" prop="images" />
       <el-table-column label="单价" align="center" prop="price" />
       <el-table-column label="原价" align="center" prop="opPrice" />
-      <el-table-column label="状态 1上架 0下架" align="center" prop="status" />
+      <el-table-column label="状态" align="center" prop="status" :formatter="goodsStatusFormatter"/>
       <el-table-column label="库存表" align="center" prop="stock" />
       <el-table-column label="排序号" align="center" prop="sort" />
       <el-table-column label="备注" align="center" prop="remark" />
@@ -197,9 +198,9 @@
         <el-form-item label="原价" prop="opPrice">
           <el-input v-model="form.opPrice" placeholder="请输入原价" />
         </el-form-item>
-        <el-form-item label="状态 1上架 0下架">
+        <el-form-item label="状态">
           <el-radio-group v-model="form.status">
-            <el-radio label="1">请选择字典生成</el-radio>
+            <el-radio :label="item.dictValue" v-for="item in goodsStatusOptions" >{{item.dictLabel}}</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="库存表" prop="stock">
@@ -227,6 +228,8 @@ export default {
   name: "LiveGoods",
   data() {
     return {
+      //字典
+      goodsStatusOptions: [],
       // 遮罩层
       loading: true,
       // 导出遮罩层
@@ -271,6 +274,9 @@ export default {
   },
   created() {
     this.getList();
+    this.getDicts("sys_live_goods_show").then(response => {
+      this.goodsStatusOptions = response.data;
+    });
   },
   methods: {
     /** 查询直播商品列表 */
@@ -282,6 +288,9 @@ export default {
         this.loading = false;
       });
     },
+    goodsStatusFormatter(row, column) {
+        return this.selectDictLabel(this.statusOptions, row.status);
+    },
     // 取消按钮
     cancel() {
       this.open = false;

src/views/live/liveOrder/index.vue

@@ -107,9 +107,9 @@
           placeholder="选择完成时间">
         </el-date-picker>
       </el-form-item>
-      <el-form-item label="状态 1待支付 2已支付 3已发货 4已完成 -1已取消 -2已退款" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择状态 1待支付 2已支付 3已发货 4已完成 -1已取消 -2已退款" clearable size="small">
-          <el-option label="请选择字典生成" value="" />
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
+          <el-option v-for="(item,index) in orderStatusOptions" :key="item.dictValue+index" :label="item.dictLabel" :value="item.dictValue" />
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -167,7 +167,7 @@
 
     <el-table border v-loading="loading" :data="liveOrderList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="状态 1待支付 2已支付 3已发货 4已完成 -1已取消 -2已退款" align="center" prop="orderId" />
+      <el-table-column label="订单ID" align="center" prop="orderId"/>
       <el-table-column label="订单号" align="center" prop="orderSn" />
       <el-table-column label="用户ID" align="center" prop="userId" />
       <el-table-column label="收货人" align="center" prop="userName" />
@@ -188,7 +188,7 @@
           <span>{{ parseTime(scope.row.finishTime, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="状态 1待支付 2已支付 3已发货 4已完成 -1已取消 -2已退款" align="center" prop="status" />
+      <el-table-column label="状态" align="center" prop="status" :formatter="orderStatusFormatter"/>
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -267,9 +267,9 @@
             placeholder="选择完成时间">
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="状态 1待支付 2已支付 3已发货 4已完成 -1已取消 -2已退款">
+        <el-form-item label="状态">
           <el-radio-group v-model="form.status">
-            <el-radio label="1">请选择字典生成</el-radio>
+            <el-radio :label="item.dictValue" v-for="item in orderStatusOptions" >{{item.dictLabel}}</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
@@ -291,6 +291,8 @@ export default {
   name: "LiveOrder",
   data() {
     return {
+      //字典
+      orderStatusOptions: [],
       // 遮罩层
       loading: true,
       // 导出遮罩层
@@ -338,6 +340,9 @@ export default {
   },
   created() {
     this.getList();
+    this.getDicts("sys_live_order_status").then(response => {
+      this.orderStatusOptions = response.data;
+    });
   },
   methods: {
     /** 查询订单列表 */
@@ -349,6 +354,9 @@ export default {
         this.loading = false;
       });
     },
+    orderStatusFormatter(row, column) {
+      return this.selectDictLabel(this.orderStatusOptions, row.status);
+    },
     // 取消按钮
     cancel() {
       this.open = false;

src/views/live/liveOrderitems/index.vue

@@ -46,9 +46,9 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="状态 1正常 2已退款" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择状态 1正常 2已退款" clearable size="small">
-          <el-option label="请选择字典生成" value="" />
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
+          <el-option v-for="(item,index) in orderGoodsStatusOptions" :key="item.dictValue+index" :label="item.dictLabel" :value="item.dictValue" />
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -113,7 +113,7 @@
       <el-table-column label="商品名" align="center" prop="goodsName" />
       <el-table-column label="单价" align="center" prop="price" />
       <el-table-column label="数量" align="center" prop="num" />
-      <el-table-column label="状态 1正常 2已退款" align="center" prop="status" />
+      <el-table-column label="状态" align="center" prop="status" :formatter="orderGoodsStatusFormatter"/>
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -164,9 +164,9 @@
         <el-form-item label="数量" prop="num">
           <el-input v-model="form.num" placeholder="请输入数量" />
         </el-form-item>
-        <el-form-item label="状态 1正常 2已退款">
+        <el-form-item label="状态">
           <el-radio-group v-model="form.status">
-            <el-radio label="1">请选择字典生成</el-radio>
+            <el-radio :label="item.dictValue" v-for="item in orderGoodsStatusOptions" >{{item.dictLabel}}</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
@@ -188,6 +188,8 @@ export default {
   name: "LiveOrderitems",
   data() {
     return {
+      //字典
+      orderGoodsStatusOptions: [],
       // 遮罩层
       loading: true,
       // 导出遮罩层
@@ -229,6 +231,9 @@ export default {
   },
   created() {
     this.getList();
+    this.getDicts("sys_live_order_goods_status").then(response => {
+      this.orderGoodsStatusOptions = response.data;
+    });
   },
   methods: {
     /** 查询订单商品列表 */
@@ -240,6 +245,9 @@ export default {
         this.loading = false;
       });
     },
+    orderGoodsStatusFormatter(row, column) {
+      return this.selectDictLabel(this.orderGoodsStatusOptions, row.status);
+    },
     // 取消按钮
     cancel() {
       this.open = false;

src/views/live/liveVideo/index.vue

@@ -19,9 +19,9 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="类型 1录播 2回放" prop="videoType">
-        <el-select v-model="queryParams.videoType" placeholder="请选择类型 1录播 2回放" clearable size="small">
-          <el-option label="请选择字典生成" value="" />
+      <el-form-item label="类型" prop="videoType">
+        <el-select v-model="queryParams.videoType" placeholder="请选择类型" clearable size="small">
+          <el-option v-for="(item,index) in videoTypeOptions" :key="item.dictValue+index" :label="item.dictLabel" :value="item.dictValue" />
         </el-select>
       </el-form-item>
       <el-form-item label="排序号" prop="sort">
@@ -91,7 +91,7 @@
       <el-table-column label="ID" align="center" prop="videoId" />
       <el-table-column label="直播ID" align="center" prop="liveId" />
       <el-table-column label="视频地址" align="center" prop="videoUrl" />
-      <el-table-column label="类型 1录播 2回放" align="center" prop="videoType" />
+      <el-table-column label="类型" align="center" prop="videoType" :formatter="videoTypeFormatter"/>
       <el-table-column label="排序号" align="center" prop="sort" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -131,9 +131,9 @@
         <el-form-item label="视频地址" prop="videoUrl">
           <el-input v-model="form.videoUrl" placeholder="请输入视频地址" />
         </el-form-item>
-        <el-form-item label="类型 1录播 2回放" prop="videoType">
-          <el-select v-model="form.videoType" placeholder="请选择类型 1录播 2回放">
-            <el-option label="请选择字典生成" value="" />
+        <el-form-item label="类型" prop="videoType">
+          <el-select v-model="form.videoType" placeholder="请选择类型">
+            <el-option v-for="(item,index) in videoTypeOptions" :key="item.dictValue+index" :label="item.dictLabel" :value="item.dictValue" />
           </el-select>
         </el-form-item>
         <el-form-item label="排序号" prop="sort">
@@ -158,6 +158,8 @@ export default {
   name: "LiveVideo",
   data() {
     return {
+      //字典
+      videoTypeOptions: [],
       // 遮罩层
       loading: true,
       // 导出遮罩层
@@ -196,6 +198,9 @@ export default {
   },
   created() {
     this.getList();
+    this.getDicts("sys_live_video_type").then(response => {
+      this.videoTypeOptions = response.data;
+    });
   },
   methods: {
     /** 查询直播视频列表 */
@@ -207,6 +212,9 @@ export default {
         this.loading = false;
       });
     },
+    videoTypeFormatter(row, column) {
+      return this.selectDictLabel(this.videoTypeOptions, row.status);
+    },
     // 取消按钮
     cancel() {
       this.open = false;