|
@@ -1,108 +1,116 @@
|
|
|
<template>
|
|
|
- <view style="position: relative;">
|
|
|
+ <view>
|
|
|
<navInfo :title="'编辑人员'"></navInfo>
|
|
|
- <view class="bgTopImg" style="height:200rpx;">
|
|
|
+ <view class="bgTopImg" style="height:200rpx;position: fixed;z-index: 9;">
|
|
|
<image slot="right" class="bgTopImg"></image>
|
|
|
</view>
|
|
|
- <div class="cardBox">
|
|
|
- <uni-card v-for="item in tableList" style="border: 2rpx solid #4DB1B6;">
|
|
|
- <div style="display: flex;justify-content: space-between;align-items: center;">
|
|
|
- <div>
|
|
|
- <text>姓名:{{item.empName}}</text><br>
|
|
|
- <text>电话:{{ item.mobile }}</text><br>
|
|
|
- <text>身份证号:{{item.idcardno}}</text><br>
|
|
|
- <text>职务:{{getDuty(item.empType)}}</text>
|
|
|
- </div>
|
|
|
- <div style="display: flex;justify-content: space-around;align-items: center;">
|
|
|
- <button @click="delUser(item)" class="editBtn" style="background-color: red;">删除</button>
|
|
|
- <button @click="editUser(item)" class="editBtn">编辑</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </uni-card>
|
|
|
- </div>
|
|
|
- <!-- 新增的人员表单项 -->
|
|
|
- <div v-for="(person, index) in membersList" :key="index"
|
|
|
- style="border-bottom: 1px solid black;margin-top: 100rpx;">
|
|
|
- <u--form ref="forms">
|
|
|
- <u-form-item class="typeStyle" :prop="'name' + (index + 1)">
|
|
|
- <p style="width: 150rpx;margin-left: 20rpx;">姓名</p>
|
|
|
- <u-input v-model="person.name" id="nameId" @change="nameBlur" :placeholder="'请输入姓名'" />
|
|
|
- <span class="erroring" v-if="nameRules">请输入名称</span>
|
|
|
- </u-form-item>
|
|
|
- <u-form-item class="typeStyle" :prop="'age' + (index + 1)">
|
|
|
- <p style="width: 150rpx;margin-left: 20rpx;">身份证号</p>
|
|
|
- <u-input @change="userBlur" v-model="person.userNum" :placeholder="'请输入身份证号'" />
|
|
|
- <span class="erroring" v-if="userRules">身份证号有误</span>
|
|
|
- </u-form-item>
|
|
|
- <!-- 其他人员信息字段 -->
|
|
|
- <u-form-item class="typeStyle" :prop="'age' + (index + 1)">
|
|
|
- <p style="width: 150rpx;margin-left: 20rpx;">电话号</p>
|
|
|
- <u-input v-model="person.phone" @change="phoneBlur" :placeholder="'请输入电话号'" />
|
|
|
- <span class="erroring" v-if="phoneRules">电话号有误</span>
|
|
|
- </u-form-item>
|
|
|
- <!-- <u-form-item class="typeStyle" :prop="'age' + (index + 1)">
|
|
|
+ <view class="uni-container">
|
|
|
+ <view class=" flex flex-direction width100">
|
|
|
+ <view class="cardBox">
|
|
|
+ <uni-card v-for="item in tableList" style="border: 2rpx solid #4DB1B6;">
|
|
|
+ <view style="display: flex;justify-content: space-between;align-items: center;">
|
|
|
+ <view>
|
|
|
+ <text>姓名:{{item.empName}}</text><br>
|
|
|
+ <text>电话:{{ item.mobile }}</text><br>
|
|
|
+ <text>身份证号:{{item.idcardno}}</text><br>
|
|
|
+ <text>职务:{{getDuty(item.empType)}}</text>
|
|
|
+ </view>
|
|
|
+ <view style="display: flex;justify-content: space-around;align-items: center;">
|
|
|
+ <button @click="delUser(item)" class="editBtn"
|
|
|
+ style="background-color: red;">删除</button>
|
|
|
+ <button @click="editUser(item)" class="editBtn">编辑</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-card>
|
|
|
+ </view>
|
|
|
+ <!-- 新增的人员表单项 -->
|
|
|
+ <view v-for="(person, index) in membersList" :key="index" style="border-bottom: 1px solid #f8f8f8;">
|
|
|
+ <u--form ref="forms" labelPosition="left" labelWidth="150" labelAlign="left">
|
|
|
+ <u-form-item class="typeStyle" :prop="'name' + (index + 1)">
|
|
|
+ <p style="width: 150rpx;margin-left: 20rpx;">姓名</p>
|
|
|
+ <u-input v-model="person.name" id="nameId" @change="nameBlur" :placeholder="'请输入姓名'" />
|
|
|
+ <span class="erroring" v-if="nameRules">请输入名称</span>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item class="typeStyle" :prop="'age' + (index + 1)">
|
|
|
+ <p style="width: 150rpx;margin-left: 20rpx;">身份证号</p>
|
|
|
+ <u-input @change="userBlur" v-model="person.userNum" :placeholder="'请输入身份证号'" />
|
|
|
+ <span class="erroring" v-if="userRules">身份证号有误</span>
|
|
|
+ </u-form-item>
|
|
|
+ <!-- 其他人员信息字段 -->
|
|
|
+ <u-form-item class="typeStyle" :prop="'age' + (index + 1)">
|
|
|
+ <p style="width: 150rpx;margin-left: 20rpx;">电话号</p>
|
|
|
+ <u-input v-model="person.phone" @change="phoneBlur" :placeholder="'请输入电话号'" />
|
|
|
+ <span class="erroring" v-if="phoneRules">电话号有误</span>
|
|
|
+ </u-form-item>
|
|
|
+ <!-- <u-form-item class="typeStyle" :prop="'age' + (index + 1)">
|
|
|
<p style="width: 150rpx;margin-left: 20rpx;">人员类型</p>
|
|
|
<u-input v-model="person.worker" :placeholder="'请输入人员类型'" />
|
|
|
</u-form-item> -->
|
|
|
- <u-form-item class="antherStyle">
|
|
|
- <p style="width: 150rpx;">人员类型</p>
|
|
|
- <uni-data-select v-model="person.power" :localdata="selectType" @change="change"></uni-data-select>
|
|
|
- <!-- <uni-data-select v-model="person.worker" :localdata="range" @change="change"></uni-data-select> -->
|
|
|
- </u-form-item>
|
|
|
- <u-form-item>
|
|
|
- <u-button type="primary" @click="addSure" class="antherBtn">提交</u-button>
|
|
|
- <u-button type="primary" @click="cleanList" class="antherBtn">取消</u-button>
|
|
|
- </u-form-item>
|
|
|
- </u--form>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <u-popup :show="showModal" mode="center" @close="closeModal" :round="10">
|
|
|
- <view class="modalBox">
|
|
|
- <u--form labelPosition="left" :model="formbox" ref="uForm" style="width: 100%;">
|
|
|
- <u-form-item style="width: 400rpx;" label="姓名" prop="formbox.fname" borderBottom ref="item1">
|
|
|
- <u--input class="insides" v-model="formbox.fname" border="none"></u--input>
|
|
|
+ <u-form-item class="antherStyle">
|
|
|
+ <p style="width: 150rpx;">人员类型</p>
|
|
|
+ <uni-data-select v-model="person.power" :localdata="selectType"
|
|
|
+ @change="change"></uni-data-select>
|
|
|
+ <!-- <uni-data-select v-model="person.worker" :localdata="range" @change="change"></uni-data-select> -->
|
|
|
</u-form-item>
|
|
|
- <u-form-item style="width: 350rpx;" label="电话号" prop="formbox.fphone" borderBottom ref="item1">
|
|
|
- <u--input class="insides" v-model="formbox.fphone" border="none"></u--input>
|
|
|
- </u-form-item>
|
|
|
- <u-form-item style="width: 490rpx;" label="人员类型" prop="formbox.fpower" borderBottom ref="item1">
|
|
|
- <uni-data-select v-model="formbox.fpower" :localdata="selectType"
|
|
|
- @change="change1"></uni-data-select>
|
|
|
- </u-form-item>
|
|
|
- <u-form-item style="width: 350rpx;" label="身份证号" prop="userInfo.fuserNum" borderBottom
|
|
|
- ref="item1">
|
|
|
- <u--input class="insides" v-model="formbox.fuserNum" border="none"></u--input>
|
|
|
+ <u-form-item>
|
|
|
+ <u-button type="primary" @click="addSure" class="antherBtn">提交</u-button>
|
|
|
+ <u-button type="primary" @click="cleanList" class="antherBtn">取消</u-button>
|
|
|
</u-form-item>
|
|
|
- <!-- <u-form-item style="width: 350rpx;" label="人员类型" prop="userInfo.fworker" borderBottom
|
|
|
+ </u--form>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <u-popup :show="showModal" mode="center" @close="closeModal" :round="10">
|
|
|
+ <view class="modalBox">
|
|
|
+ <u--form labelPosition="left" :model="formbox" ref="uForm" labelWidth="100"
|
|
|
+ labelAlign="left">
|
|
|
+ <u-form-item label="姓名" prop="formbox.fname" borderBottom ref="item1">
|
|
|
+ <u--input class="insides" v-model="formbox.fname" border="none"></u--input>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="电话号" prop="formbox.fphone" borderBottom ref="item1">
|
|
|
+ <u--input class="insides" v-model="formbox.fphone" border="none"></u--input>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="人员类型" prop="formbox.fpower" borderBottom ref="item1">
|
|
|
+ <uni-data-select v-model="formbox.fpower" :localdata="selectType"
|
|
|
+ @change="change1"></uni-data-select>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="身份证号" prop="userInfo.fuserNum" borderBottom ref="item1">
|
|
|
+ <u--input class="insides" v-model="formbox.fuserNum" border="none"></u--input>
|
|
|
+ </u-form-item>
|
|
|
+ <!-- <u-form-item style="width: 350rpx;" label="人员类型" prop="userInfo.fworker" borderBottom
|
|
|
ref="item1">
|
|
|
<u--input class="insides" v-model="formbox.fworker" border="none"></u--input>
|
|
|
</u-form-item> -->
|
|
|
- </u--form>
|
|
|
- <div class="useBox">
|
|
|
- <button class="antherBtn" @click="makeSureEdit">确认修改</button>
|
|
|
-
|
|
|
- <button class="antherBtn" @click="showModal = false">取消</button>
|
|
|
- </div>
|
|
|
+ </u--form>
|
|
|
+ <view class="useBox">
|
|
|
+ <button class="antherBtn" @click="makeSureEdit">确认修改</button>
|
|
|
+
|
|
|
+ <button class="antherBtn" @click="showModal = false">取消</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <u-popup :show="showDel" title="确认删除?" mode="center">
|
|
|
+ <view style="width: 400rpx;height: 200rpx;margin: 20rpx 20rpx;">
|
|
|
+ <p style="font-size: 35rpx;color: black;">是否删除该数据项?</p>
|
|
|
+ <p style="font-size: 20rpx;color: gray;">确认删除?</p>
|
|
|
+ <view
|
|
|
+ style="display: flex;justify-content: space-around;align-items: center;margin-top: 40rpx;">
|
|
|
+ <button class="antherBtn" @click="makeSureDel"
|
|
|
+ style="background-color: red;">确认</button>
|
|
|
+ <button class="antherBtn" @click="showDel = false">取消</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <u-modal :show="show123" @confirm="confirm" @cancel="cancel" @close="close" asyncClose
|
|
|
+ closeOnClickOverlay showCancelButton confirmColor="red" title="是否删除该数据项" content="确认删除?"
|
|
|
+ ref="uModal"></u-modal>
|
|
|
</view>
|
|
|
- </u-popup>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <u-popup :show="showDel" title="确认删除?" mode="center">
|
|
|
- <div style="width: 400rpx;height: 200rpx;margin: 20rpx 20rpx;">
|
|
|
- <p style="font-size: 35rpx;color: black;">是否删除该数据项?</p>
|
|
|
- <p style="font-size: 20rpx;color: gray;">确认删除?</p>
|
|
|
- <div style="display: flex;justify-content: space-around;align-items: center;margin-top: 40rpx;">
|
|
|
- <button class="antherBtn" @click="makeSureDel" style="background-color: red;">确认</button>
|
|
|
- <button class="antherBtn" @click="showDel = false">取消</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </u-popup>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <u-modal :show="show123" @confirm="confirm" @cancel="cancel" @close="close" asyncClose closeOnClickOverlay
|
|
|
- showCancelButton confirmColor="red" title="是否删除该数据项" content="确认删除?" ref="uModal"></u-modal>
|
|
|
- </div>
|
|
|
- <button @click="addNewPeople" class="circleBtn">+</button>
|
|
|
+ <button @click="addNewPeople" class="circleBtn">+</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -224,9 +232,10 @@
|
|
|
},
|
|
|
|
|
|
addSure() {
|
|
|
+ console.log(this.$route.query.addId, 'this.$route.query.addId');
|
|
|
if (this.$route.query.addId) {
|
|
|
if (!this.userRules && !this.phoneRules && !this.nameRules) {
|
|
|
- console.log(this.membersList[0].worker,'988');
|
|
|
+ console.log(this.membersList[0].worker, '988');
|
|
|
creatFirePeople({
|
|
|
empName: this.membersList[0].name,
|
|
|
empType: this.membersList[0].worker,
|
|
@@ -499,7 +508,14 @@
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .uni-container {
|
|
|
+ padding: 10px;
|
|
|
+ background: #fff;
|
|
|
+ // z-index: 9999999;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
/deep/ .typeStyle {
|
|
|
width: 650rpx !important;
|
|
|
}
|
|
@@ -512,12 +528,12 @@
|
|
|
|
|
|
/deep/ .antherBtn {
|
|
|
width: 200rpx;
|
|
|
- height: 50rpx;
|
|
|
+ height: 80rpx;
|
|
|
margin-bottom: 30rpx;
|
|
|
background-color: #4DB1B6;
|
|
|
color: white;
|
|
|
text-align: center;
|
|
|
- line-height: 50rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
font-size: 30rpx;
|
|
|
border-radius: 20rpx;
|
|
|
}
|
|
@@ -549,7 +565,7 @@
|
|
|
}
|
|
|
|
|
|
.editBtn {
|
|
|
- width: 100rpx;
|
|
|
+ width: 120rpx;
|
|
|
height: 60rpx;
|
|
|
background-color: #4DB1B6;
|
|
|
color: white;
|
|
@@ -563,7 +579,21 @@
|
|
|
|
|
|
.modalBox {
|
|
|
width: 700rpx;
|
|
|
- height: 880rpx;
|
|
|
+ height: 750rpx;
|
|
|
+ /deep/.uni-select {
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ border: 1px solid #4DB1B6;
|
|
|
+ }
|
|
|
+ /deep/ .u-line{
|
|
|
+ border:none !important;
|
|
|
+ }
|
|
|
+ /deep/ .uni-input-input{
|
|
|
+ padding: 0 10rpx;
|
|
|
+ }
|
|
|
+ /deep/ .u-form-item__body{
|
|
|
+ width: 90%;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.insides {
|
|
@@ -593,18 +623,24 @@
|
|
|
line-height: 100rpx;
|
|
|
color: white;
|
|
|
background-color: #4EB0B5;
|
|
|
- position: absolute;
|
|
|
- top: 1300rpx;
|
|
|
- left: 590rpx;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 20rpx;
|
|
|
+ right: 20rpx;
|
|
|
}
|
|
|
|
|
|
.cardBox {
|
|
|
width: 650rpx;
|
|
|
- margin: 30rpx auto;
|
|
|
+ margin: 100rpx auto 20rpx;
|
|
|
border-radius: 30rpx;
|
|
|
}
|
|
|
|
|
|
.u-form-item__body__left {
|
|
|
width: 100rpx;
|
|
|
}
|
|
|
+
|
|
|
+ /deep/.u-button--primary {
|
|
|
+ border: none
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
</style>
|