新增页面 完成

pages/Project/add.vue

@@ -1,123 +1,152 @@
 <template>
-  <view class="content">
-    <view class="title"> 新增项目 </view>
-    <uni-forms
-      :modelValue="formData"
-      label-position="left"
-      class="form"
-      ref="form"
-      :rules="rules"
-    >
-      <uni-forms-item required label="项目名称" name="project_name">
-        <uni-easyinput
-          type="text"
-          v-model="formData.project_name"
-          class="input"
-        />
-      </uni-forms-item>
-      <uni-forms-item label="项目类别" name="type" required>
-        <picker
-          @change="selectChangeType"
-          :range="typeList"
-          :range-key="'name'"
-          :value="
-            formData.type &&
-            typeList.findIndex((item) => item.id == formData.type.id)
-          "
+  <view class="page">
+    <view class="content">
+      <view class="contentWrapper">
+        <uni-forms
+          :modelValue="formData"
+          label-position="left"
+          class="form"
+          ref="form"
+          :rules="rules"
         >
-          <view class="select">
-            {{
-              formData.type && `${formData.type.name}(${formData.type.code})`
-            }}
-          </view>
-        </picker>
-      </uni-forms-item>
-      <uni-forms-item label="流程" name="flow">
-        <picker disabled>
-          <view class="select">
-            {{
-              formData.type && (formData.type.id == 7 ? "研发立项" : "销售立项")
-            }}
-          </view>
-        </picker>
-      </uni-forms-item>
-    </uni-forms>
-    <uni-forms
-      :modelValue="formData"
-      label-position="left"
-      class="form"
-      ref="fullForm"
-      :rules="rules"
-      v-show="!formData.type || (formData.type && formData.type.id != 7)"
-    >
-      <uni-forms-item label="行业名称" name="industry" required>
-        <picker
-          @change="selectChangeIndustry"
-          :range="industryList"
-          :range-key="'name'"
-          :value="
-            formData.industry &&
-            typeList.findIndex((item) => item.id == formData.industry.id)
-          "
+          <uni-forms-item
+            required
+            label="项目名称"
+            name="project_name"
+            class="formItem"
+          >
+            <input
+              v-model="formData.project_name"
+              class="input"
+              placeholder="请输入项目名称"
+            />
+          </uni-forms-item>
+          <uni-forms-item
+            label="项目类别"
+            name="type"
+            required
+            class="formItem"
+          >
+            <picker
+              @change="selectChangeType"
+              :range="typeList"
+              :range-key="'name'"
+              :value="
+                formData.type &&
+                typeList.findIndex((item) => item.id == formData.type.id)
+              "
+            >
+              <view class="select" v-if="formData.type">
+                {{ `${formData.type.name}(${formData.type.code})` }}
+              </view>
+              <view class="selectPlaceholder" v-else>请选择项目类别</view>
+            </picker>
+          </uni-forms-item>
+          <uni-forms-item label="流程" name="flow" class="formItem">
+            <picker disabled>
+              <view class="select">
+                {{
+                  formData.type &&
+                  (formData.type.id == 7 ? "研发立项" : "销售立项")
+                }}
+              </view>
+            </picker>
+          </uni-forms-item>
+        </uni-forms>
+        <uni-forms
+          :modelValue="formData"
+          label-position="left"
+          class="form"
+          ref="fullForm"
+          :rules="rules"
+          v-show="!formData.type || (formData.type && formData.type.id != 7)"
         >
-          <view class="select">
-            {{
-              formData.industry &&
-              `${formData.industry.name}(${formData.industry.code})`
-            }}
-          </view>
-        </picker>
-      </uni-forms-item>
-      <uni-forms-item label="项目地区" name="location" required>
-        <picker
-          mode="multiSelector"
-          @columnchange="bindChangeLocationColumn"
-          @change="selectChangeLocation"
-          :range="locationList"
-          :range-key="'name'"
-          :value="locationIndex"
-        >
-          <view class="select">
-            {{
-              formData.location &&
-              `${formData.location.name}(${formData.code.location})`
-            }}
-          </view>
-        </picker>
-      </uni-forms-item>
-      <uni-forms-item label="项目简称" name="name" required>
-        <uni-easyinput
-          type="text"
-          v-model="formData.name"
-          class="input"
-          :clearable="false"
-          @blur="onChangeName"
-        />
-      </uni-forms-item>
-      <uni-forms-item label="项目期数" name="version" required>
-        <picker
-          @change="selectChangeVersion"
-          :range="versionList"
-          :value="formData.version && formData.version - 1"
-        >
-          <view class="select">
-            {{ versionList[this.formData.version - 1] }}
-          </view>
-        </picker>
-      </uni-forms-item>
-      <uni-forms-item label="项目编号" name="code">
-        <view>
-          {{
-            `${formData.code.type}-${formData.code.industry}-${formData.code.location}-${formData.code.name}-${formData.code.version}`
-          }}
-        </view>
-      </uni-forms-item>
-    </uni-forms>
-    <view class="group">
-      <button @click="onHandleSubmit(0)" class="commit">取消</button>
-      <button @click="onHandleSubmit(1)" type="primary" class="commit">
-        确定
-      </button>
+          <uni-forms-item
+            label="行业名称"
+            name="industry"
+            required
+            class="formItem"
+          >
+            <picker
+              @change="selectChangeIndustry"
+              :range="industryList"
+              :range-key="'name'"
+              :value="
+                formData.industry &&
+                typeList.findIndex((item) => item.id == formData.industry.id)
+              "
+            >
+              <view class="select" v-if="formData.industry">
+                {{ `${formData.industry.name}(${formData.industry.code})` }}
+              </view>
+              <view class="selectPlaceholder" v-else>请选择行业</view>
+            </picker>
+          </uni-forms-item>
+          <uni-forms-item
+            label="项目地区"
+            name="location"
+            required
+            class="formItem"
+          >
+            <picker
+              mode="multiSelector"
+              @columnchange="bindChangeLocationColumn"
+              @change="selectChangeLocation"
+              :range="locationList"
+              :range-key="'name'"
+              :value="locationIndex"
+            >
+              <view class="select" v-if="formData.location">
+                {{ `${formData.location.name}(${formData.code.location})` }}
+              </view>
+              <view class="selectPlaceholder" v-else>请选择项目地区</view>
+            </picker>
+          </uni-forms-item>
+          <uni-forms-item
+            label="项目简称"
+            name="name"
+            required
+            class="formItem"
+          >
+            <input
+              v-model="formData.name"
+              class="input"
+              @blur="onChangeName"
+              placeholder="请输入项目简称"
+            />
+          </uni-forms-item>
+          <uni-forms-item
+            label="项目期数"
+            name="version"
+            required
+            class="formItem"
+          >
+            <picker
+              @change="selectChangeVersion"
+              :range="versionList"
+              :value="formData.version && formData.version - 1"
+            >
+              <view class="select" v-if="formData.version">
+                {{ versionList[formData.version - 1] }}
+              </view>
+              <view class="selectPlaceholder" v-else>请选择期数</view>
+            </picker>
+          </uni-forms-item>
+          <uni-forms-item label="项目编号" name="code" class="formItem">
+            <view class="input">
+              {{
+                `${formData.code.type}-${formData.code.industry}-${formData.code.location}-${formData.code.name}-${formData.code.version}`
+              }}
+            </view>
+          </uni-forms-item>
+        </uni-forms>
+      </view>
+      <view class="group">
+        <button @click="onHandleSubmit(0)" class="commit">取消</button>
+        <button @click="onHandleSubmit(1)" type="primary" class="commit">
+          确定
+        </button>
+      </view>
     </view>
   </view>
 </template>
@@ -175,7 +204,7 @@ export default {
           rules: [
             {
               required: true,
-              errorMessage: "请选择行业名称",
+              errorMessage: "请选择行业",
             },
           ],
         },
@@ -410,29 +439,44 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.content {
+.contentWrapper {
   display: flex;
   flex-wrap: wrap;
 }
-.title {
-  width: 100%;
-  padding: 0 20px 20px 20px;
-  background: #f8f8f8;
-  font: 24px bold;
-}
 .form {
-  margin: 20px 10% 0 10%;
+  margin: 0 5%;
   width: 100%;
 }
+.formItem {
+  border-bottom: 1rpx solid #eee;
+}
+::v-deep {
+  .uni-forms-item__inner {
+    padding: 10px 0;
+  }
+}
 .input {
-  border: 1px solid #666;
+  text-align: end;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: 72rpx;
+  font-size: 28rpx;
 }
 .select {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+  height: 72rpx;
+}
+.selectPlaceholder {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
   width: 100%;
   height: 72rpx;
-  line-height: 70rpx;
-  border: 1px solid #666;
-  padding-left: 20rpx;
+  color: #808080;
 }
 .group {
   width: 100%;