警犬技术人员管理采集静态页面开发

src/assets/styles/detailContent.scss

+* {
+  box-sizing: border-box;
+}
+
+.detailContentClass {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 24px;
+
+  .contents {
+    width: 100%;
+    border-radius: 5px;
+    background: #fff;
+    padding: 32px;
+
+    .titles {
+      position: relative;
+      font-size: 18px;
+      color: #333333;
+      margin-bottom: 10px;
+    }
+
+    .titles::after {
+      position: absolute;
+      content: "";
+      width: 100%;
+      height: 8px;
+      background: rgba(44, 93, 229, 0.2);
+      bottom: 6px;
+      left: 0;
+    }
+
+    .spaceBetween {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .elItemClass {
+      width: 22%;
+    }
+
+    .hengLine {
+      width: 100%;
+      height: 1px;
+      background: #D8D8D8;
+      margin: 20px 0;
+    }
+
+    /deep/ .el-select {
+      width: 100%;
+    }
+
+    /deep/ .el-input-number {
+      width: 100%;
+    }
+
+    .elBtns {
+      width: 100%;
+      text-align: right;
+    }
+  }
+}
\ No newline at end of file

src/views/artisanManage/components/artisanManageEdit.vue

 <template>
-  <div>
-    编辑页面
+  <div class="detailContentClass">
+    <div class="contents">
+      <el-form
+        :model="detailInfo"
+        ref="detailInfoRef"
+        size="small"
+        :rules="rules"
+      >
+        {{detailInfo}}
+        <div
+          class="titles"
+          style="width: 145px;"
+        >技术人员个人信息</div>
+        <div class="spaceBetween">
+          <el-form-item
+            label="姓名"
+            class="elItemClass"
+            prop="personName"
+          >
+            <el-input
+              v-model="detailInfo.personName"
+              :clearable="true"
+              placeholder="请输入技术人员姓名"
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            label="身份证号码"
+            class="elItemClass"
+            prop="idNo"
+          >
+            <el-input
+              v-model="detailInfo.idNo"
+              :clearable="true"
+              placeholder="请输入身份证号码"
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            label="性别"
+            class="elItemClass"
+            prop="gender"
+          >
+            <el-input
+              v-model="detailInfo.gender"
+              :disabled="true"
+              placeholder="请输入身份证号码获取性别"
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            label="出生日期"
+            class="elItemClass"
+            prop="birthDate"
+          >
+            <el-input
+              v-model="detailInfo.birthDate"
+              :disabled="true"
+              placeholder="请输入身份证号码获取出生日期"
+            ></el-input>
+          </el-form-item>
+        </div>
+        <div class="spaceBetween">
+          <el-form-item
+            label="是否警犬技术相关专业"
+            class="elItemClass"
+            prop="isjwzy"
+          >
+            <el-select
+              clearable
+              placeholder="请选择是否警犬技术相关专业"
+              v-model="detailInfo.isjwzy"
+            >
+              <el-option
+                v-for="(item, index) in shifouOptions"
+                :key="index"
+                :label="item.label"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            label="毕业院校"
+            class="elItemClass"
+            prop="school"
+          >
+            <el-input
+              v-model="detailInfo.school"
+              :clearable="true"
+              placeholder="请输入毕业院校"
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            label="归属单位"
+            class="elItemClass"
+            prop="unitName"
+          >
+            <el-select
+              clearable
+              placeholder="请选择归属单位"
+              v-model="detailInfo.unitName"
+            >
+              <el-option
+                v-for="(item, index) in shifouOptions"
+                :key="index"
+                :label="item.label"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            label="警务技术序列"
+            class="elItemClass"
+            prop="jwjsxl"
+          >
+            <el-select
+              clearable
+              placeholder="请选择警务技术序列"
+              v-model="detailInfo.jwjsxl"
+            >
+              <el-option
+                v-for="(item, index) in jwjsxlOptions"
+                :key="index"
+                :label="item.label"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </div>
+        <div class="spaceBetween">
+          <el-form-item
+            label="从事警犬技术工作时间（年）"
+            class="elItemClass"
+            prop="workYears"
+          >
+            <el-input-number
+              v-model="detailInfo.workYears"
+              controls-position="right"
+              :min="0"
+            ></el-input-number>
+          </el-form-item>
+        </div>
+
+        <div class="hengLine"></div>
+
+        <div
+          class="titles"
+          style="width: 90px;"
+        >采集人信息</div>
+        <div class="spaceBetween">
+          <el-form-item
+            label="采集人姓名"
+            class="elItemClass"
+            prop="xxdjryXm"
+          >
+            <el-input
+              v-model="detailInfo.xxdjryXm"
+              :disabled="true"
+              placeholder="采集人姓名"
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            label="采集人身份证号码"
+            class="elItemClass"
+            prop="xxdjryGmsfhm"
+          >
+            <el-input
+              v-model="detailInfo.xxdjryGmsfhm"
+              :disabled="true"
+              placeholder="采集人身份证号码"
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            label="采集人单位名称"
+            class="elItemClass"
+            prop="xxdjdwGajgmc"
+          >
+            <el-input
+              v-model="detailInfo.xxdjdwGajgmc"
+              :disabled="true"
+              placeholder="采集人单位名称"
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            label="采集人单位代码"
+            class="elItemClass"
+            prop="xxdjdwGajgjgdm"
+          >
+            <el-input
+              v-model="detailInfo.xxdjdwGajgjgdm"
+              :disabled="true"
+              placeholder="采集人单位代码"
+            ></el-input>
+          </el-form-item>
+        </div>
+        <div class="spaceBetween">
+          <el-form-item
+            label="采集时间"
+            class="elItemClass"
+            prop="djsj"
+          >
+            <el-input
+              v-model="detailInfo.djsj"
+              :disabled="true"
+              placeholder="采集时间"
+            ></el-input>
+          </el-form-item>
+        </div>
+
+        <div class="hengLine"></div>
+
+        <div class="elBtns">
+          <el-button size="medium">返回</el-button>
+          <el-button
+            type="primary"
+            size="medium"
+          >保存</el-button>
+        </div>
+      </el-form>
+    </div>
   </div>
 </template>
 
 <script>
+import { getJsonDataApi } from "@/utils/getJsonData.js";
+
 export default {
   name: "artisanManageEdit",
   data() {
-    return {};
+    return {
+      detailInfo: {
+        personName: "",
+        idNo: "",
+        gender: "",
+        birthDate: "",
+        isjwzy: "",
+        school: "",
+        unitName: "",
+        jwjsxl: "",
+        xxdjryXm: "",
+        xxdjryGmsfhm: "",
+        xxdjdwGajgmc: "",
+        xxdjdwGajgjgdm: "",
+        djsj: "",
+      },
+      rules: {
+        personName: [
+          { required: true, message: "请输入技术人员姓名", trigger: "blur" },
+        ],
+        idNo: [
+          { required: true, message: "请输入身份证号码", trigger: "blur" },
+        ],
+        gender: [
+          {
+            required: true,
+            message: "请输入身份证号码获取性别",
+            trigger: "blur",
+          },
+        ],
+        birthDate: [
+          {
+            required: true,
+            message: "请输入身份证号码获取出生日期",
+            trigger: "blur",
+          },
+        ],
+        isjwzy: [
+          {
+            required: true,
+            message: "请选择是否警犬技术相关专业",
+            trigger: "change",
+          },
+        ],
+        unitName: [
+          {
+            required: true,
+            message: "请选择归属单位",
+            trigger: "change",
+          },
+        ],
+        jwjsxl: [
+          {
+            required: true,
+            message: "请选择警务技术序列",
+            trigger: "change",
+          },
+        ],
+        workYears: [
+          {
+            required: true,
+            message: "请输入从事警犬技术工作时间",
+            trigger: "blur",
+          },
+        ],
+        xxdjryXm: [
+          { required: true, message: "采集人姓名必填", trigger: "blur" },
+        ],
+        xxdjryGmsfhm: [
+          { required: true, message: "采集人身份证号码必填", trigger: "blur" },
+        ],
+        xxdjdwGajgmc: [
+          { required: true, message: "采集人单位名称必填", trigger: "blur" },
+        ],
+        xxdjdwGajgjgdm: [
+          { required: true, message: "采集人单位代码必填", trigger: "blur" },
+        ],
+        djsj: [{ required: true, message: "采集时间必填", trigger: "blur" }],
+      },
+
+      shifouOptions: [],
+      jwjsxlOptions: [],
+    };
+  },
+  async mounted() {
+    this.shifouOptions = await getJsonDataApi("CODE_YN");
+    this.jwjsxlOptions = await getJsonDataApi("CODE_JWJXXL");
   },
-  mounted() {},
   methods: {},
   watch: {},
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped lang="scss">
+@import "../../../assets/styles/detailContent.scss";
+</style>