Skip to content

F
founder_vue
Commit 69982667 by liuguorong93
Options

工作犬复训管理-批量新增 静态页面

parent c7d47276
Showing with 727 additions and 2 deletions
src/router/modules/index.js
......@@ -146,7 +146,7 @@ export default [
keepAlive: true,
oneMenuName: 'jqjsgzgl',
paixu: 2,
routeNames: ["jobDogManageEdit", "jobDogManageAdd"]
routeNames: ["jobDogManageEdit", "jobDogManageAdd", "jobDogManageBatchAdd"]
}
},
// 工作犬复训管理（编辑页）
......@@ -172,6 +172,16 @@ export default [
}
},
// 工作犬复训管理（批量新增页）
{
path: 'jobDogManageBatchAdd',
name: 'jobDogManageBatchAdd',
component: () => import('@/views/jobDogManage/components/jobDogManageBatchAdd.vue'),
meta: {
title: '工作犬复训管理-批量新增',
// 编辑新增页面此字段务必设置为true
isEditPage: true
}
},
// 工作犬等级评定管理（二级菜单）
{
......
src/views/jobDogManage/components/jobDogManageBatchAdd.vue 0 → 100644
<template>
<div
class="detailContentClass"
v-loading="loading"
>
<div class="contents">
{{detailInfo}}
<div>{{dogInfoLists}}</div>
<el-form
:model="detailInfo"
ref="detailInfoRef"
:rules="rules"
>
<div
class="titles"
style="width: 182px;"
>工作犬复训数据采集项</div>
<div class="divBoxClass">
<el-form-item
label="考核单位"
class="elItemClass"
prop="checkUnit"
>
<lazy-select-tree-dialog
:sendId="detailInfo.checkUnit"
:formData="detailInfo"
:currentItem="unitInfo"
/>
</el-form-item>
<el-form-item
label="培训日期"
class="elItemClass elDateClass"
prop="dateArr"
>
<el-date-picker
v-model="detailInfo.dateArr"
type="daterange"
value-format="yyyy-MM-dd"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
>
</el-date-picker>
</el-form-item>
<el-form-item
label="考核人员"
class="elItemClass"
prop="checkStaff"
>
<el-input
v-model.trim="detailInfo.checkStaff"
:clearable="true"
placeholder="请输入考核人员"
></el-input>
</el-form-item>
</div>
<div class="divBoxClass numClass">
<el-form-item
label="新增数量："
prop="dogNum"
>
<el-input-number
v-model="detailInfo.dogNum"
controls-position="right"
@change="handleChange"
:min="1"
></el-input-number>
</el-form-item>
<p class="tips">输入新增数量，对应下列新增警犬数</p>
</div>
<div class="divBoxClass itemClass_father">
<div
class="itemClass_item spaceBetween"
v-for="(item, index) in dogInfoLists"
:key="index"
>
<div class="leftNum">
<div class="leftNum_two">{{ index + 1 }}</div>
</div>
<div class="rightForm spaceBetween">
<el-form-item
label="芯片号"
class="jssfzhClass"
style="width: 18%;"
:prop="'propChipCode' + index"
>
<el-input
v-model.trim="item.chipCode"
:clearable="true"
placeholder="请输入芯片号"
class="itemSfzh"
></el-input>
<el-button
type="primary"
size="small"
style="height: 40px;margin-right: 0 !important;"
>提取</el-button>
</el-form-item>
<el-form-item
label="警犬名称"
style="width: 14%;"
:prop="'propName' + index"
>
<el-input
v-model.trim="item.name"
:disabled="false"
placeholder="输入芯片号提取名称"
></el-input>
</el-form-item>
<el-form-item
label="工作犬等级"
style="width: 12%;"
:prop="'propTrainingLevelId' + index"
>
<el-select
clearable
placeholder="输入芯片号提取工作犬等级"
:disabled="false"
v-model="item.trainingLevelId"
>
<el-option
v-for="(item, index) in gzqdjOptions"
:key="index"
:label="item.label"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="归属单位"
style="width: 14%;"
:prop="'propTrainingUnit' + index"
>
<el-input
v-model.trim="item.trainingUnit"
:disabled="false"
placeholder="输入芯片号提取归属单位"
></el-input>
</el-form-item>
<el-form-item
label="培训次数"
style="width: 12%;"
:prop="'propTrainCount' + index"
>
<el-select
clearable
placeholder="请选择培训次数"
v-model="item.trainCount"
>
<el-option
v-for="(item, index) in trainCountOption"
:key="index"
:label="item.label"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<div style="width: 22%;">
<el-form-item
style="width: 100%;"
class="sxjqClass"
v-for="(itemKaoHe, indexKaoHe) in item.kaoHeLists"
:key="indexKaoHe"
:prop="'propKaoHe' + index + indexKaoHe"
>
<template
slot="label"
v-if="indexKaoHe === 0"
>
<span class="labelNameClass">培训科目</span>
</template>
<el-select
clearable
placeholder="专业方向"
class="itemSxjqClass"
v-model="itemKaoHe.zhuanye"
>
<el-option
v-for="(item, index) in zyfxOptions"
:key="index"
:label="item.label"
:value="item.id"
>
</el-option>
</el-select>
<el-input
v-model.trim="itemKaoHe.fenshu"
placeholder="分数"
:clearable="true"
class="itemJqxphClass"
></el-input>
<div
class="conBtnClass"
title="增加考核"
v-if="indexKaoHe === 0"
@click="addKaoHe(index)"
>+</div>
<div
class="conBtnClass"
title="删除考核"
v-if="indexKaoHe > 0"
@click="removeKaoHe(index, indexKaoHe)"
>-</div>
</el-form-item>
</div>
</div>
</div>
</div>
<div class="divBoxClass">
<el-form-item
label="备注"
class="elItemClass"
style="width:48%;"
prop="remark"
>
<el-input
v-model.trim="detailInfo.remark"
:clearable="true"
placeholder="请输入备注"
type="textarea"
:autosize="{ minRows: 4, maxRows: 8 }"
></el-input>
</el-form-item>
</div>
<div class="hengLine"></div>
<div
class="titles"
style="width: 90px;"
>采集人信息</div>
<div class="divBoxClass">
<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>
<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="small"
class="btnStylePub"
@click="goBack"
>返回</el-button>
<el-button
type="primary"
size="small"
style="margin-right: 0 !important;"
class="btnStylePub"
@click="saveData"
>保存</el-button>
</div>
</el-form>
</div>
</div>
</template>
<script>
import {
extractJobDog,
batchAddJobDog,
} from "@/api/menuDataApi/jobDogManageApi.js";
import { getJsonDataApi } from "@/utils/getJsonData.js";
import moment from "moment";
import LazySelectTreeDialog from "@c/lazy_treeCode_components.vue";
export default {
name: "jobDogManageBatchAdd",
components: {
LazySelectTreeDialog,
},
data() {
return {
loading: false,
detailInfo: {
checkUnit: "",
dateArr: [],
checkStaff: "",
dogNum: 1,
remark: "",
xxdjryXm: "",
xxdjryGmsfhm: "",
xxdjdwGajgmc: "",
xxdjdwGajgjgdm: "",
djsj: "",
},
dogInfoLists: [
{
chipCode: "",
name: "",
trainingLevelId: "",
trainingUnit: "",
trainCount: "",
kaoHeLists: [
{
zhuanye: "",
fenshu: "",
},
],
},
],
rules: {
dateArr: [
{
type: "array",
required: true,
message: "请选择培训日期",
trigger: "change",
},
],
checkStaff: [
{ required: true, message: "请输入考核人员", trigger: "blur" },
],
checkUnit: [
{
required: true,
message: "请选择考核单位",
trigger: "change",
},
],
dogNum: [
{
required: true,
message: "请选择数量",
trigger: "change",
},
],
},
unitInfo: {
name: "考核单位:",
id: "checkUnit",
type: "lazyCodeTreeDialog",
value: "",
prop: "checkEmpty",
placeholder: "请选择考核单位",
col: "2",
disabled: false,
codeTree: "CODE_QGUNIT",
codeOptions: [],
},
userInfoJson: {},
pickerOptions: {
shortcuts: [
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
},
},
],
},
gzqdjOptions: [],
trainCountOption: [],
zyfxOptions: [],
};
},
async mounted() {
let userInfo = window.sessionStorage.getItem("userInfo");
if (userInfo) this.userInfoJson = JSON.parse(userInfo);
this.detailInfo.xxdjryXm = this.userInfoJson.userName || "";
this.detailInfo.xxdjryGmsfhm = this.userInfoJson.identitycard || "";
this.detailInfo.xxdjdwGajgmc = this.userInfoJson.unitname || "";
this.detailInfo.xxdjdwGajgjgdm = this.userInfoJson.unitcode || "";
this.detailInfo.djsj = moment().format("YYYY-MM-DD HH:mm:ss");
this.gzqdjOptions = await getJsonDataApi("CODE_GZQDJ");
this.trainCountOption = await getJsonDataApi("CODE_TRAINCOUNT");
this.zyfxOptions = await getJsonDataApi("CODE_BASEDATA");
},
methods: {
handleChange(newVal, oldVal) {
console.log(newVal, oldVal);
},
goBack() {},
addKaoHe(index) {
this.dogInfoLists[index].kaoHeLists.push({
zhuanye: "",
fenshu: "",
});
},
removeKaoHe(index, indexKaoHe) {
this.dogInfoLists[index].kaoHeLists.splice(indexKaoHe, 1);
},
saveData() {
this.$refs.detailInfoRef.validate((result) => {
if (result) {
console.log("true");
}
});
},
updateDogInfoRules(val) {
if (val?.length) {
val.forEach((item, index) => {
this.rules[`propChipCode${index}`] = [
{
required: true,
validator: (rule, value, callback) => {
let curVal = item.chipCode || "";
if (!curVal) {
callback(new Error(`请输入芯片号`));
} else {
callback();
}
},
trigger: "blur",
},
];
this.rules[`propName${index}`] = [
{
required: true,
validator: (rule, value, callback) => {
let curVal = item.name || "";
if (!curVal) {
callback(new Error(`输入芯片号提取名称`));
} else {
callback();
}
},
trigger: "blur",
},
];
this.rules[`propTrainingLevelId${index}`] = [
{
required: true,
validator: (rule, value, callback) => {
let curVal = item.trainingLevelId || "";
if (!curVal) {
callback(new Error(`输入芯片号提取工作犬等级`));
} else {
callback();
}
},
trigger: "change",
},
];
this.rules[`propTrainingUnit${index}`] = [
{
required: true,
validator: (rule, value, callback) => {
let curVal = item.trainingUnit || "";
if (!curVal) {
callback(new Error(`输入芯片号提取归属单位`));
} else {
callback();
}
},
trigger: "blur",
},
];
this.rules[`propTrainCount${index}`] = [
{
required: true,
validator: (rule, value, callback) => {
let curVal = item.trainCount || "";
if (!curVal) {
callback(new Error(`请选择培训次数`));
} else {
callback();
}
},
trigger: "change",
},
];
if (item.kaoHeLists?.length) {
item.kaoHeLists.forEach((item2, index2) => {
this.rules[`propKaoHe${index}${index2}`] = [
{
required: true,
validator: (rule, value, callback) => {
let myreg =
/^([0-9]{1,2}$)|(^[0-9]{1,2}\.[0-9]{1,2}$)|100$/;
let zhuanye = item2.zhuanye || "";
let fenshu = item2.fenshu || "";
if (!zhuanye) {
callback(new Error(`请选择专业方向`));
} else if (!fenshu) {
callback(new Error(`请输入分数`));
} else if (!myreg.test(fenshu)) {
callback(
new Error(`分数输入有误，0-100之间且小数位最多2位`)
);
} else {
callback();
}
},
trigger: "change",
},
];
});
}
});
}
},
},
watch: {
dogInfoLists: {
deep: true,
immediate: true,
handler(val) {
this.updateDogInfoRules(val);
},
},
},
};
</script>
<style scoped lang="scss">
@import "../../../assets/styles/detailContent.scss";
.numClass {
width: 100%;
line-height: 40px;
display: flex;
margin-top: 10px;
/deep/ .el-form-item {
display: flex !important;
}
/deep/ .el-input-number {
width: 180px !important;
}
.tips {
font-size: 12px;
color: #8b8b8b;
margin-left: 20px;
}
}
.itemClass_father {
width: 100%;
.itemClass_item {
margin: 20px 0;
.leftNum {
position: relative;
width: 32px;
height: 32px;
background: #8ddb81;
border-radius: 50%;
margin-top: 20px;
.leftNum_two {
position: absolute;
width: 26px;
height: 26px;
background: #30be1a;
border-radius: 50%;
text-align: center;
line-height: 26px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 14px;
color: #ffffff;
font-family: DIN;
}
}
.rightForm {
width: calc(100% - 52px);
}
}
}
.jssfzhClass {
/deep/ .el-form-item__label {
width: 100%;
text-align: left;
}
.itemSfzh {
width: calc(100% - 66px);
margin-right: 10px;
}
}
.sxjqClass {
/deep/ .el-form-item__label {
width: 100%;
text-align: left;
}
/deep/ .el-form-item__label:before {
vertical-align: middle;
}
/deep/ .el-form-item__content {
position: relative;
}
.labelNameClass {
display: inline-block;
vertical-align: middle;
margin-right: 8px;
}
.yuandianClass {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #2c5de5;
vertical-align: middle;
margin-right: 3px;
}
.numClass {
font-family: DIN;
display: inline-block;
color: #2c5de5;
font-size: 14px;
vertical-align: middle;
}
.itemSxjqClass {
width: 41% !important;
margin-right: 5%;
}
.itemJqxphClass {
width: 41%;
margin-right: 5%;
}
.itemJqxphClass2 {
width: 87%;
margin-right: 5%;
}
.conBtnClass {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid #2c5de5;
line-height: 12px;
text-align: center;
color: #2c5de5;
cursor: pointer;
position: absolute;
right: 0;
bottom: 12px;
}
}
</style>
src/views/jobDogManage/index.vue
......@@ -416,7 +416,9 @@ export default {
this.$message("已取消删除");
});
},
batchAdd() {},
batchAdd() {
this.$router.push({ name: "jobDogManageBatchAdd" });
},
exportData() {
this.tableLoading = true;
let params = {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment