(): 新增一个表单模板

tools/frontend/src/router/index.js

@@ -208,6 +208,7 @@ const router = new Router({
         },
         {
           path: "/device/form",
+          name: "DeviceForm",
           component: () => import("@/views/Application/DeviceForm"),
         },
       ],

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

@@ -79,7 +79,7 @@
           </a-form>
         </div>
         <div class="tableListOperator">
-          <a-button icon="plus" type="primary"> 新建 </a-button>
+          <a-button icon="plus" type="primary" @click="onAdd"> 新建 </a-button>
           <span v-show="selectedRowKeys.length > 0">
             <a-button>批量操作</a-button>
             <!-- <a-dropdown overlay={menu}>
@@ -108,7 +108,7 @@
           <template slot="action" slot-scope="text, record">
             <a href="javascript:;">查看</a>
             <a-divider type="vertical" />
-            <a href="javascript:;">配置</a>
+            <a href="javascript:;">编辑</a>
           </template>
         </a-table>
       </div>
@@ -221,6 +221,9 @@ export default {
     ARangePicker: DatePicker.RangePicker,
   },
   methods: {
+    onAdd() {
+      this.$router.push({ name: "DeviceForm", params: {} });
+    },
     toggleForm() {
       this.expandForm = !this.expandForm;
     },

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

 <template>
-  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
-    <a-form>
-      <a-form-item
-        :label="$t('title')"
-        :labelCol="{ span: 7 }"
-        :wrapperCol="{ span: 10 }"
-      >
-        <a-input :placeholder="$t('titleInput')" />
-      </a-form-item>
-      <a-form-item
-        :label="$t('date')"
-        :labelCol="{ span: 7 }"
-        :wrapperCol="{ span: 10 }"
-      >
-        <a-range-picker style="width: 100%" />
-      </a-form-item>
-      <a-form-item
-        :label="$t('describe')"
-        :labelCol="{ span: 7 }"
-        :wrapperCol="{ span: 10 }"
-      >
-        <a-textarea rows="4" :placeholder="$t('describeInput')" />
-      </a-form-item>
-      <a-form-item
-        :label="$t('metrics')"
-        :labelCol="{ span: 7 }"
-        :wrapperCol="{ span: 10 }"
-      >
-        <a-textarea rows="4" :placeholder="$t('metricsInput')" />
-      </a-form-item>
-      <a-form-item
-        :label="$t('customer')"
-        :labelCol="{ span: 7 }"
-        :wrapperCol="{ span: 10 }"
-        :required="false"
-      >
-        <a-input :placeholder="$t('customerInput')" />
-      </a-form-item>
-      <a-form-item
-        :label="$t('critics')"
-        :labelCol="{ span: 7 }"
-        :wrapperCol="{ span: 10 }"
-        :required="false"
-      >
-        <a-input :placeholder="$t('criticsInput')" />
-      </a-form-item>
-      <a-form-item
-        :label="$t('weight')"
-        :labelCol="{ span: 7 }"
-        :wrapperCol="{ span: 10 }"
-        :required="false"
-      >
-        <a-input-number :min="0" :max="100" />
-        <span>%</span>
-      </a-form-item>
-      <a-form-item
-        :label="$t('disclosure')"
-        :labelCol="{ span: 7 }"
-        :wrapperCol="{ span: 10 }"
-        :required="false"
-        :help="$t('disclosureDesc')"
-      >
-        <a-radio-group v-model="value">
-          <a-radio :value="1">{{ $t("public") }}</a-radio>
-          <a-radio :value="2">{{ $t("partially") }}</a-radio>
-          <a-radio :value="3">{{ $t("private") }}</a-radio>
-        </a-radio-group>
-        <a-select mode="multiple" v-if="value === 2">
-          <a-select-option value="4">{{ $t("colleague1") }}</a-select-option>
-          <a-select-option value="5">{{ $t("colleague2") }}</a-select-option>
-          <a-select-option value="6">{{ $t("colleague3") }}</a-select-option>
-        </a-select>
-      </a-form-item>
-      <a-form-item
-        style="margin-top: 24px"
-        :wrapperCol="{ span: 10, offset: 7 }"
-      >
-        <a-button type="primary">{{ $t("submit") }}</a-button>
-        <a-button style="margin-left: 8px">{{ $t("save") }}</a-button>
-      </a-form-item>
-    </a-form>
-  </a-card>
+  <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 }"
+        >
+          <a-input placeholder="给目标起个名字" />
+        </a-form-item>
+        <a-form-item
+          label="起止日期"
+          :labelCol="{ span: 7 }"
+          :wrapperCol="{ span: 10 }"
+        >
+          <a-range-picker style="width: 100%" />
+        </a-form-item>
+        <a-form-item
+          label="目标描述"
+          :labelCol="{ span: 7 }"
+          :wrapperCol="{ span: 10 }"
+        >
+          <a-textarea rows="4" placeholder="请输入你阶段性工作目标" />
+        </a-form-item>
+        <a-form-item
+          label="衡量标准"
+          :labelCol="{ span: 7 }"
+          :wrapperCol="{ span: 10 }"
+        >
+          <a-textarea rows="4" placeholder="请输入衡量标准" />
+        </a-form-item>
+        <a-form-item
+          label="客户"
+          :labelCol="{ span: 7 }"
+          :wrapperCol="{ span: 10 }"
+          :required="false"
+        >
+          <a-input placeholder="请描述你服务的客户，内部客户直接 @姓名／工号" />
+        </a-form-item>
+        <a-form-item
+          label="邀评人"
+          :labelCol="{ span: 7 }"
+          :wrapperCol="{ span: 10 }"
+          :required="false"
+        >
+          <a-input placeholder="请直接 @姓名／工号，最多可邀请 5 人" />
+        </a-form-item>
+        <a-form-item
+          label="权重"
+          :labelCol="{ span: 7 }"
+          :wrapperCol="{ span: 10 }"
+          :required="false"
+        >
+          <a-input-number :min="0" :max="100" />
+          <span>%</span>
+        </a-form-item>
+        <a-form-item
+          label="目标公开"
+          :labelCol="{ span: 7 }"
+          :wrapperCol="{ span: 10 }"
+          :required="false"
+          help="客户、邀评人默认被分享"
+        >
+          <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-form-item>
+        <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>
@@ -144,11 +146,12 @@ export default {
   data() {
     return {
       value: 1,
+      title: "添加",
     };
   },
   computed: {
     desc() {
-      return this.$t("pageDesc");
+      return "表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。";
     },
   },
   created() {