✨ feat(): 添加应用管理表单前端

tools/config.json

@@ -556,7 +556,7 @@
         },
         {
             "name": "package",
-            "enable": false,
+            "enable": true,
             "controller": {
                 "className": "Resource"
             },
@@ -589,6 +589,14 @@
                         "required": true,
                         "toJson": true
                     },
+                    {
+                        "name": "algorithm",
+                        "dataType": "String",
+                        "default": "zlib",
+                        "length": 50,
+                        "required": true,
+                        "toJson": true
+                    },
                     {
                         "name": "file_path",
                         "dataType": "String",
@@ -1050,7 +1058,7 @@
         },
         {
             "name": "device",
-            "enable": true,
+            "enable": false,
             "controller": {
                 "className": "Resource"
             },
@@ -1346,7 +1354,7 @@
         },
         {
             "name": "monitorWatch",
-            "enable": true,
+            "enable": false,
             "controller": {
                 "className": "Resource"
             },
@@ -1413,7 +1421,7 @@
         },
         {
             "name": "monitorSystem",
-            "enable": true,
+            "enable": false,
             "controller": {
                 "className": "Resource"
             },
@@ -1512,7 +1520,7 @@
         },
         {
             "name": "monitorLvgl",
-            "enable": true,
+            "enable": false,
             "controller": {
                 "className": "Resource"
             },
@@ -1626,7 +1634,7 @@
         },
         {
             "name": "monitorImage",
-            "enable": true,
+            "enable": false,
             "controller": {
                 "className": "Resource"
             },
@@ -1727,7 +1735,7 @@
         },
         {
             "name": "monitorEvm",
-            "enable": true,
+            "enable": false,
             "controller": {
                 "className": "Resource"
             },

tools/frontend/package.json

@@ -15,11 +15,11 @@
     "codemirror": "^5.59.2",
     "core-js": "^3.9.0",
     "cropperjs": "^1.5.11",
-    "eslint": "^7.30.0",
     "npm-check-updates": "^11.7.1",
     "numeral": "^2.0.6",
     "plyr": "^3.6.4",
     "vue": "^2.5.17",
+    "vue-cli": "^2.9.6",
     "vue-codemirror": "^4.0.6",
     "vue-i18n": "^8.1.0",
     "vue-router": "^3.0.1",
@@ -30,7 +30,9 @@
     "@vue/cli-plugin-babel": "^3.0.3",
     "@vue/cli-plugin-eslint": "^3.0.3",
     "@vue/cli-service": "^3.0.3",
+    "babel-eslint": "^10.1.0",
     "babel-plugin-import": "^1.9.1",
+    "eslint": "^7.30.0",
     "eslint-plugin-vue": "^7.13.0",
     "less": "^3.8.1",
     "less-loader": "^4.1.0",

tools/frontend/src/views/Application/Form.vue

 <template>
-  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
+  <a-page-header-wrapper :title="title">
+    <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
       <a-form>
         <a-form-item
           label="标题"
-        :labelCol="{span: 7}"
-        :wrapperCol="{span: 10}"
+          :labelCol="{ span: 7 }"
+          :wrapperCol="{ span: 10 }"
+          :required="true"
         >
-        <a-input placeholder="给目标起个名字" />
+          <a-input placeholder="给应用起个名字" />
         </a-form-item>
         <a-form-item
-        label="起止日期"
-        :labelCol="{span: 7}"
-        :wrapperCol="{span: 10}"
+          label="打包算法"
+          :labelCol="{ span: 7 }"
+          :wrapperCol="{ span: 10 }"
         >
-        <a-range-picker style="width: 100%" />
+          <a-radio-group v-model="value" @change="onChange">
+            <a-radio-button value="zlib"> zlib </a-radio-button>
+            <a-radio-button value="eheatshrink"> eheatshrink </a-radio-button>
+          </a-radio-group>
         </a-form-item>
         <a-form-item
-        label="目标描述"
-        :labelCol="{span: 7}"
-        :wrapperCol="{span: 10}"
+          label="应用版本号"
+          :labelCol="{ span: 7 }"
+          :wrapperCol="{ span: 10 }"
+          :required="false"
         >
-        <a-textarea rows="4" placeholder="请输入你阶段性工作目标"/>
+          <a-input v-model="post.app_version" placeholder="请输入版本号" />
         </a-form-item>
         <a-form-item
-        label="衡量标准"
-        :labelCol="{span: 7}"
-        :wrapperCol="{span: 10}"
+          label="应用类别"
+          :labelCol="{ span: 7 }"
+          :wrapperCol="{ span: 10 }"
+          :required="true"
+        >
+          <a-select
+            mode="tags"
+            style="width: 100%"
+            placeholder="应用所属类别"
+            @change="handleChange"
           >
-        <a-textarea rows="4" placeholder="请输入衡量标准"/>
+            <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
+              {{ (i + 9).toString(36) + i }}
+            </a-select-option>
+          </a-select>
         </a-form-item>
         <a-form-item
-        label="客户"
-        :labelCol="{span: 7}"
-        :wrapperCol="{span: 10}"
-        :required="false"
+          label="应用ICON"
+          :labelCol="{ span: 7 }"
+          :wrapperCol="{ span: 10 }"
+          :required="true"
+        >
+          <a-upload
+            name="avatar"
+            list-type="picture-card"
+            class="avatar-uploader"
+            :show-upload-list="false"
+            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+            :before-upload="beforeUpload"
+            @change="handleChange"
           >
-        <a-input placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"/>
+            <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
+            <div v-else>
+              <a-icon :type="loading ? 'loading' : 'plus'" />
+              <div class="ant-upload-text">上传</div>
+            </div>
+          </a-upload>
         </a-form-item>
         <a-form-item
-        label="邀评人"
-        :labelCol="{span: 7}"
-        :wrapperCol="{span: 10}"
-        :required="false"
+          label="适配尺寸"
+          :labelCol="{ span: 7 }"
+          :wrapperCol="{ span: 10 }"
+          :required="true"
         >
-        <a-input placeholder="请直接 @姓名／工号，最多可邀请 5 人"/>
+          <a-select :default-value="sizeList[0].label" style="width: 120px">
+            <a-select-option v-for="item in sizeList" :key="(item.value + 9).toString(36) + item.value" :value="item.label">
+              {{ item.label }}
+            </a-select-option>
+          </a-select>
         </a-form-item>
         <a-form-item
-        label="权重"
-        :labelCol="{span: 7}"
-        :wrapperCol="{span: 10}"
-        :required="false"
+          label="适配平台"
+          :labelCol="{ span: 7 }"
+          :wrapperCol="{ span: 10 }"
+          :required="true"
         >
-        <a-input-number :min="0" :max="100"/>
-        <span>%</span>
+          <a-select :default-value="portList[0].label" style="width: 120px">
+            <a-select-option v-for="item in portList" :key="(item.value + 9).toString(36) + item.value" :value="item.label">
+              {{ item.label }}
+            </a-select-option>
+          </a-select>
         </a-form-item>
         <a-form-item
-        label="目标公开"
-        :labelCol="{span: 7}"
-        :wrapperCol="{span: 10}"
-        :required="false"
-        help="客户、邀评人默认被分享"
+          label="应用介绍"
+          :labelCol="{ span: 7 }"
+          :wrapperCol="{ span: 10 }"
         >
-        <a-radio-group v-model="value">
-          <a-radio :value="1">公开</a-radio>
-          <a-radio :value="2">部分公开</a-radio>
-          <a-radio :value="3">不公开</a-radio>
-        </a-radio-group>
-        <a-select mode="multiple" v-if="value === 2">
-          <a-select-option value="4">同事甲</a-select-option>
-          <a-select-option value="5">同事乙</a-select-option>
-          <a-select-option value="6">同事丙</a-select-option>
-        </a-select>
+          <a-textarea rows="4" placeholder="请输入应用介绍" />
+        </a-form-item>
+        <a-form-item
+          label="应用源文件"
+          :labelCol="{ span: 7 }"
+          :wrapperCol="{ span: 10 }"
+          :required="true"
+        >
+          <a-upload-dragger
+            name="file"
+            :multiple="true"
+            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+            @change="handleSourceFileChange"
+          >
+            <p class="ant-upload-drag-icon">
+              <a-icon type="inbox" />
+            </p>
+            <p class="ant-upload-text">
+              点击或拖拽文件到此
+            </p>
+            <p class="ant-upload-hint">
+              支持单次或批量上传
+            </p>
+          </a-upload-dragger>
         </a-form-item>
-      <a-form-item style="margin-top: 24px" :wrapperCol="{span: 10, offset: 7}">
+        <a-form-item
+          style="margin-top: 24px"
+          :wrapperCol="{ span: 10, offset: 7 }"
+        >
           <a-button type="primary">提交</a-button>
           <a-button style="margin-left: 8px">保存</a-button>
         </a-form-item>
       </a-form>
     </a-card>
+  </a-page-header-wrapper>
 </template>
 
 <script>
@@ -96,24 +149,43 @@ import {
   Input,
   Select,
   Radio,
+  Upload,
+  PageHeader,
   DatePicker,
-  InputNumber
+  InputNumber,
 } from "ant-design-vue";
 import PageHeaderWrapper from "@/components/PageHeaderWrapper";
 import DescriptionItem from "@/components/DescriptionItem";
 export default {
-  name: 'BasicForm',
-  i18n: require('./i18n'),
-  data () {
+  name: "BasicForm",
+  data() {
     return {
-      value: 1
-    }
+      loading: false,
+      imageUrl: "",
+      value: 1,
+      title: "编辑",
+      post: {
+        app_version: '',
+      },
+      sizeList: [
+        { label: '240 * 240', value: 1 },
+        { label: '390 * 390', value: 2 },
+        { label: '450 * 450', value: 3 }
+      ],
+      portList: [
+        { label: 'ASR3601', value: 1 },
+        { label: 'ASR3603', value: 2 },
+      ],
+    };
   },
   components: {
     Icon,
+    AUpload: Upload,
+    APageHeader: PageHeader,
     ATextarea: Input.TextArea,
     ARadio: Radio,
     ARadioGroup: Radio.Group,
+    ARadioButton: Radio.Button,
     AInputNumber: InputNumber,
     AAvatar: Avatar,
     ARow: Row,
@@ -131,18 +203,79 @@ export default {
     ADropdown: Dropdown,
     AInput: Input,
     ASelect: Select,
-    AOption: Select.Option,
+    AUploadDragger: Upload.Dragger,
+    ASelectOption: Select.Option,
     ADescriptionItem: DescriptionItem,
     APageHeaderWrapper: PageHeaderWrapper,
     ARangePicker: DatePicker.RangePicker,
   },
+  methods: {
+    handleUploadChange(info) {
+      if (info.file.status === "uploading") {
+        this.loading = true;
+        return;
+      }
+      if (info.file.status === "done") {
+        // Get this url from response in real world.
+        getBase64(info.file.originFileObj, (imageUrl) => {
+          this.imageUrl = imageUrl;
+          this.loading = false;
+        });
+      }
+    },
+    handleSourceFileChange(info) {
+      const status = info.file.status;
+      if (status !== 'uploading') {
+        console.log(info.file, info.fileList);
+      }
+      if (status === 'done') {
+        this.$message.success(`${info.file.name} file uploaded successfully.`);
+      } else if (status === 'error') {
+        this.$message.error(`${info.file.name} file upload failed.`);
+      }
+    },
+    beforeUpload(file) {
+      const isJpgOrPng =
+        file.type === "image/jpeg" || file.type === "image/png";
+      if (!isJpgOrPng) {
+        this.$message.error("You can only upload JPG file!");
+      }
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isLt2M) {
+        this.$message.error("Image must smaller than 2MB!");
+      }
+      return isJpgOrPng && isLt2M;
+    },
+    onChange(e) {
+      console.log(`checked = ${e.target.value}`);
+    },
+    handleChange(value) {
+      console.log(`selected ${value}`);
+    },
+  },
   computed: {
     desc() {
-      return this.$t('pageDesc')
-    }
+      return this.$t("pageDesc");
     },
-}
+  },
+  created() {
+    console.log(this.$route.query);
+  },
+};
 </script>
 
 <style scoped>
+.avatar-uploader > .ant-upload {
+  width: 128px;
+  height: 128px;
+}
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}
 </style>
\ No newline at end of file

tools/frontend/src/views/Application/i18n.js

-module.exports = {
-  messages: {
-    CN: {
-      pageDesc:
-        "表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。",
-      title: "标题",
-      titleInput: "给目标起个名字",
-      date: "起止日期",
-      describe: "目标描述",
-      describeInput: "请输入你阶段性工作目标",
-      metrics: "衡量标准",
-      metricsInput: "请输入衡量标准",
-      customer: "客户",
-      customerInput: "请描述你服务的客户，内部客户直接 @姓名／工号",
-      critics: "邀评人",
-      criticsInput: "请直接 @姓名／工号，最多可邀请 5 人",
-      weight: "权重",
-      disclosure: "目标公开",
-      disclosureDesc: "客户、邀评人默认被分享",
-      public: "公开",
-      partially: "部分公开",
-      private: "不公开",
-      submit: "提交",
-      save: "保存",
-      colleague1: "同事甲",
-      colleague2: "同事乙",
-      colleague3: "同事丙",
-    },
-    HK: {
-      pageDesc:
-        "表單頁用於向用戶收集或驗證信息，基礎表單常見於數據項較少的表單場景。",
-      title: "標題",
-      titleInput: "給目標起個名字",
-      date: "起止日期",
-      describe: "目標描述",
-      describeInput: "請輸入你階段性的工作目標",
-      metrics: "衡量標準",
-      metricsInput: "請輸入衡量標準",
-      customer: "客戶",
-      customerInput: "請描述你服務的客戶，內部客戶直接 @姓名／工號",
-      critics: "邀評人",
-      criticsInput: "請直接 @姓名／工號，最多可邀請 5 人",
-      weight: "圈中人",
-      disclosure: "目標公開",
-      disclosureDesc: "客戶、邀評人默認被分享",
-      public: "公開",
-      partially: "部分公開",
-      private: "不公開",
-      submit: "提交",
-      save: "保存",
-      colleague1: "同事甲",
-      colleague2: "同事乙",
-      colleague3: "同事丙",
-    },
-    US: {
-      pageDesc:
-        "Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.",
-      title: "Title",
-      titleInput: "Give the target a name",
-      date: "Start and end date",
-      describe: "Goal description",
-      describeInput: "Please enter your work goals",
-      metrics: "Metrics",
-      metricsInput: "Please enter a metric",
-      customer: "Customer",
-      customerInput:
-        "Please describe your customer service, internal customers directly @ Name / job number",
-      critics: "Inviting critics",
-      criticsInput:
-        "Please direct @ Name / job number, you can invite up to 5 people",
-      weight: "Weight",
-      disclosure: "Target disclosure",
-      disclosureDesc: "Customers and invitees are shared by default",
-      public: "Public",
-      partially: "Partially public",
-      private: "Private",
-      submit: "Submit",
-      save: "Save",
-      colleague1: "Colleague A",
-      colleague2: "Colleague B",
-      colleague3: "Colleague C",
-    },
-  },
-};