feat(游戏列表): "新增/修改"新增游戏ID必填项

src/views/sys/game-config/room/form-edit.vue

@@ -10,12 +10,19 @@
     >
       <div v-loading="submitLoading">
         <div class="form-contetn">
-          <el-form ref="form" :model="form" :rules="rules" label-width="110px" style="margin-right: 50px;">
+          <el-form
+            ref="form"
+            :model="form"
+            :rules="rules"
+            label-width="110px"
+            style="margin-right: 50px;"
+          >
+            <!-- 封面 -->
             <el-form-item label="封面" prop="cover">
               <el-upload
                 :disabled="coverUploadLoading"
                 :file-list="coverFileList"
-                :class="{'upload-but-hide': !isShowCoverUpload}"
+                :class="{ 'upload-but-hide': !isShowCoverUpload }"
                 action=""
                 list-type="picture-card"
                 :http-request="uploadCover"
@@ -23,9 +30,15 @@
                 :on-remove="handleCoverFileRemove"
                 accept="image/*"
               >
-                <i slot="default" v-loading="coverUploadLoading" class="el-icon-plus" />
+                <i
+                  slot="default"
+                  v-loading="coverUploadLoading"
+                  class="el-icon-plus"
+                />
               </el-upload>
             </el-form-item>
+
+            <!-- 系统 -->
             <el-form-item label="系统">
               <el-select
                 v-model="form.sysOrigin"
@@ -41,11 +54,17 @@
                   :label="item.label"
                   :value="item.value"
                 >
-                  <span style="float: left;"> <sys-origin-icon :icon="item.value" :desc="item.value" /></span>
+                  <span style="float: left;">
-                  <span style="float: left;margin-left:10px">{{ item.label }}</span>
+                    <sys-origin-icon :icon="item.value" :desc="item.value"
+                  /></span>
+                  <span style="float: left;margin-left:10px">{{
+                    item.label
+                  }}</span>
                 </el-option>
               </el-select>
             </el-form-item>
+
+            <!-- 游戏源 -->
             <el-form-item label="游戏源" prop="gameOrigin">
               <el-select
                 v-model="form.gameOrigin"
@@ -53,19 +72,33 @@
                 style="width:100%;"
                 class="filter-item"
               >
-                <el-option v-for="item in gameOrigins" :key="item.value" :label="item.name" :value="item.value" />
+                <el-option
+                  v-for="item in gameOrigins"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
               </el-select>
             </el-form-item>
-            <el-form-item label="客户端" prop="clientOrigin">
+
+            <!-- 客户端 -->
+            <el-form-item label="游戏源" prop="clientOrigin">
               <el-select
                 v-model="form.clientOrigin"
                 placeholder="客户端"
                 style="width:100%;"
                 class="filter-item"
               >
-                <el-option v-for="item in clientOrigins" :key="item.value" :label="item.name" :value="item.value" />
+                <el-option
+                  v-for="item in clientOrigins"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
               </el-select>
             </el-form-item>
+
+            <!-- 是否自研 -->
             <el-form-item label="是否自研" prop="self">
               <el-select
                 v-model="form.self"
@@ -75,21 +108,75 @@
                 class="filter-item"
               >
                 <el-option label="是" :value="true" />
-                <el-option label="否" :value="false" />
+                <el-option label="否" :value="false" /> </el-select
-              </el-select>自研游戏下架会影响到其他系统
+              >自研游戏下架会影响到其他系统
             </el-form-item>
-            <el-form-item v-if="form.self" label="自研游戏Code" prop="selfGameCode">
+
-              <el-input v-model.trim="form.selfGameCode" type="text" placeholder="请输入自研游戏Code" minlength="1" maxlength="150" show-word-limit />
+            <!-- 自研游戏Code -->
+            <el-form-item
+              v-if="form.self"
+              label="自研游戏Code"
+              prop="selfGameCode"
+            >
+              <el-input
+                v-model.trim="form.selfGameCode"
+                type="text"
+                placeholder="请输入自研游戏Code"
+                minlength="1"
+                maxlength="150"
+                show-word-limit
+              />
             </el-form-item>
+
+            <!-- 游戏ID -->
+            <el-form-item label="游戏ID" prop="gameId">
+              <el-input
+                v-model.trim="form.gameId"
+                type="text"
+                placeholder="请输入游戏ID"
+                minlength="1"
+                maxlength="150"
+                show-word-limit
+              />
+            </el-form-item>
+
+            <!-- 名称 -->
             <el-form-item label="名称" prop="name">
-              <el-input v-model.trim="form.name" type="text" placeholder="请输入名称" minlength="1" maxlength="150" show-word-limit />
+              <el-input
+                v-model.trim="form.name"
+                type="text"
+                placeholder="请输入名称"
+                minlength="1"
+                maxlength="150"
+                show-word-limit
+              />
             </el-form-item>
+
+            <!-- 编号 -->
             <el-form-item label="编号" prop="gameCode">
-              <el-input v-model.trim="form.gameCode" type="text" placeholder="请输入编号" minlength="1" maxlength="150" show-word-limit />
+              <el-input
+                v-model.trim="form.gameCode"
+                type="text"
+                placeholder="请输入编号"
+                minlength="1"
+                maxlength="150"
+                show-word-limit
+              />
             </el-form-item>
+
+            <!-- 金额 -->
             <el-form-item label="金额" prop="gameCode">
-              <el-input v-model.trim="form.amounts" type="text" placeholder="金币必须是整数多个逗号隔改" minlength="1" maxlength="150" show-word-limit />
+              <el-input
+                v-model.trim="form.amounts"
+                type="text"
+                placeholder="金币必须是整数多个逗号隔改"
+                minlength="1"
+                maxlength="150"
+                show-word-limit
+              />
             </el-form-item>
+
+            <!-- 是否全屏 -->
             <el-form-item label="是否全屏" prop="fullScreen">
               <el-select
                 v-model="form.fullScreen"
@@ -102,12 +189,26 @@
                 <el-option label="否" :value="false" />
               </el-select>
             </el-form-item>
+
+            <!-- 宽 -->
             <el-form-item label="宽" prop="width">
-              <el-input v-model.trim="form.width" type="text" placeholder="宽度" />
+              <el-input
+                v-model.trim="form.width"
+                type="text"
+                placeholder="宽度"
+              />
             </el-form-item>
+
+            <!-- 高 -->
             <el-form-item label="高" prop="height">
-              <el-input v-model.trim="form.height" type="text" placeholder="高度" />
+              <el-input
+                v-model.trim="form.height"
+                type="text"
+                placeholder="高度"
+              />
             </el-form-item>
+
+            <!-- 状态 -->
             <el-form-item label="状态" prop="showcase">
               <el-select
                 v-model="form.showcase"
@@ -120,11 +221,30 @@
                 <el-option label="上架" :value="true" />
               </el-select>
             </el-form-item>
+
+            <!-- 排序 -->
             <el-form-item label="排序" prop="sort">
-              <el-input-number v-model.trim="form.sort" v-number style="width: 100%;" :min="0" :max="99999" placeholder="降序排列(数字越大越靠前)" />
+              <el-input-number
+                v-model.trim="form.sort"
+                v-number
+                style="width: 100%;"
+                :min="0"
+                :max="99999"
+                placeholder="降序排列(数字越大越靠前)"
+              />
             </el-form-item>
+
+            <!-- 区域 -->
             <el-form-item label="区域" prop="regionList">
-              <el-select v-model="form.regionList" v-loading="loading" multiple clearable placeholder="请选择" style="width:100%;" class="filter-item">
+              <el-select
+                v-model="form.regionList"
+                v-loading="loading"
+                multiple
+                clearable
+                placeholder="请选择"
+                style="width:100%;"
+                class="filter-item"
+              >
                 <el-option
                   v-for="(item, index) in regions"
                   :key="index"
@@ -144,10 +264,9 @@
   </div>
 </template>
 <script>
-
+import { saveOrUpdateGameConfig, regionConfigTable } from "@/api/sys";
-import { saveOrUpdateGameConfig, regionConfigTable } from '@/api/sys'
+import { getElementUiUploadFile } from "@/utils";
-import { getElementUiUploadFile } from '@/utils'
+import { mapGetters } from "vuex";
-import { mapGetters } from 'vuex'
 export default {
   props: {
     row: {
@@ -160,42 +279,46 @@ export default {
     }
   },
   data() {
-    const commonRules = [{ required: true, message: '必填字段', trigger: 'blur' }]
+    const commonRules = [
+      { required: true, message: "必填字段", trigger: "blur" }
+    ];
     return {
       gameOrigins: [
-        { value: 'THIRD_PARTY', name: '第三方游戏' },
+        { value: "THIRD_PARTY", name: "第三方游戏" },
-        { value: 'APP', name: '原生游戏' },
+        { value: "APP", name: "原生游戏" },
-        { value: 'H5', name: 'H5游戏' },
+        { value: "H5", name: "H5游戏" },
-        { value: 'BAISHUN', name: 'Baishun' },
+        { value: "BAISHUN", name: "Baishun" },
-        { value: 'LINGXIAN', name: 'LingXian' },
+        { value: "LINGXIAN", name: "LingXian" },
-        { value: 'HOTGAME', name: 'HOTGAME' }
+        { value: "HOTGAME", name: "HOTGAME" }
       ],
       clientOrigins: [
-        { value: 'ANDROID', name: '安卓' },
+        { value: "ANDROID", name: "安卓" },
-        { value: 'IOS', name: '苹果' },
+        { value: "IOS", name: "苹果" },
-        { value: 'COMMON', name: '通用' }
+        { value: "COMMON", name: "通用" }
       ],
       coverUploadLoading: false,
       coverFileList: [],
       regions: [],
       loading: false,
       form: {
-        id: '',
+        id: "",
-        cover: '',
+        sysOrigin: "YOLO",
-        sysOrigin: 'YOLO',
+        name: "",
-        name: '',
+        gameId: "",
-        gameCode: '',
+        gameCode: "",
+        cover: "",
+        amounts: "",
         showcase: false,
         sort: 0,
-        amounts: '',
+        height: "",
-        gameOrigin: '',
+        width: "",
-        height: '',
+        fullScreen: "",
-        width: '',
+        clientOrigin: "COMMON",
-        clientOrigin: 'COMMON',
         regionList: [],
-        fullScreen: '',
+
-        self: '',
+        gameOrigin: "",
-        selfGameCode: ''
+        self: "",
+        selfGameCode: ""
       },
       submitLoading: false,
       uploadLoading: false,
@@ -204,6 +327,7 @@ export default {
         sysOrigin: commonRules,
         gameOrigin: commonRules,
         name: commonRules,
+        gameId: commonRules,
         showcase: commonRules,
         sort: commonRules,
         amounts: commonRules,
@@ -211,105 +335,114 @@ export default {
         fullScreen: commonRules,
         self: commonRules
       }
-    }
+    };
   },
   computed: {
     textOptTitle() {
-      return this.row && this.row.id ? '修改' : '新增'
+      return this.row && this.row.id ? "修改" : "新增";
     },
     isShowCoverUpload() {
-      return !this.form.cover
+      return !this.form.cover;
     },
-    ...mapGetters(['permissionsSysOriginPlatforms'])
+    ...mapGetters(["permissionsSysOriginPlatforms"])
   },
   watch: {
     row: {
       handler(val) {
-        this.listRegion()
+        this.listRegion();
         if (!val) {
-          return
+          return;
         }
-        const form = Object.assign({}, val)
+        const form = Object.assign({}, val);
         if (form.regions) {
-          form.regionList = form.regions.split(',')
+          form.regionList = form.regions.split(",");
         }
-        this.coverFileList = getElementUiUploadFile(form.cover)
+        this.coverFileList = getElementUiUploadFile(form.cover);
-        this.form = Object.assign(this.form, form)
+        this.form = Object.assign(this.form, form);
         if (this.form.selfGameCode) {
-          this.form.self = true
+          this.form.self = true;
-          return
+          return;
         }
-        this.form.self = false
+        this.form.self = false;
       },
       immediate: true
     }
   },
   methods: {
     uploadCover(file) {
-      const that = this
+      const that = this;
-      that.coverUploadLoading = true
+      that.coverUploadLoading = true;
-      that.$simpleUploadFlie(file, that.$application.fileBucket.other).then(res => {
+      that
-        that.coverUploadLoading = false
+        .$simpleUploadFlie(file, that.$application.fileBucket.other)
-        that.form.cover = that.$getAccessImgUrl(res.name)
+        .then(res => {
-      }).catch(er => {
+          that.coverUploadLoading = false;
-        that.coverUploadLoading = false
+          that.form.cover = that.$getAccessImgUrl(res.name);
-      })
+        })
+        .catch(er => {
+          that.coverUploadLoading = false;
+        });
     },
     handleCoverFileRemove(file, fileList) {
-      this.form.cover = ''
+      this.form.cover = "";
-      this.coverUploadLoading = false
+      this.coverUploadLoading = false;
     },
     listRegion() {
-      const that = this
+      const that = this;
-      that.loading = true
+      that.loading = true;
-      that.form.sysOrigin = that.listquery
+      that.form.sysOrigin = that.listquery;
-      regionConfigTable({ 'sysOrigin': that.form.sysOrigin }).then(res => {
+      regionConfigTable({ sysOrigin: that.form.sysOrigin })
-        that.regions = res.body || []
+        .then(res => {
-        that.loading = false
+          that.regions = res.body || [];
-      }).catch(er => {
+          that.loading = false;
-        that.loading = false
+        })
-      })
+        .catch(er => {
+          that.loading = false;
+        });
     },
     handleClose() {
-      this.$emit('close')
+      this.$emit("close");
     },
     changeSysOrigin() {
-      this.listRegion()
+      this.listRegion();
     },
     submitForm() {
-      const that = this
+      const that = this;
       that.$refs.form.validate(valid => {
         if (!valid) {
-          console.error('error submit!!')
+          console.error("error submit!!");
-          return
+          return;
         }
         if (that.form.self && !that.form.selfGameCode) {
-          that.$opsMessage.info('必须填写自研游戏code')
+          that.$opsMessage.info("必须填写自研游戏code");
         }
-        const submitForm = Object.assign({}, that.form)
+        const submitForm = Object.assign({}, that.form);
-        that.submitLoading = true
+        that.submitLoading = true;
-        const amountsArrays = submitForm.amounts.split(',')
+        const amountsArrays = submitForm.amounts.split(",");
-        submitForm.amounts = amountsArrays.filter(item => !isNaN(parseFloat(item)) && isFinite(item)).join(',')
+        submitForm.amounts = amountsArrays
-        saveOrUpdateGameConfig(submitForm).then(res => {
+          .filter(item => !isNaN(parseFloat(item)) && isFinite(item))
-          that.submitLoading = false
+          .join(",");
-          that.$emit('success', res)
+        saveOrUpdateGameConfig(submitForm)
-        }).catch(er => {
+          .then(res => {
-          that.submitLoading = false
+            that.submitLoading = false;
-          that.$emit('fial', er)
+            that.$emit("success", res);
-        })
+          })
-      })
+          .catch(er => {
+            that.submitLoading = false;
+            that.$emit("fial", er);
+          });
+      });
     }
   }
-}
+};
 </script>
 
 <style scoped lang="scss">
 .form-contetn {
-    max-height: 550px;
+  max-height: 550px;
-    overflow: auto;
+  overflow: auto;
 }
 .form-autocomplete {
-   li {
+  li {
     line-height: normal;
     padding: 7px;