SmartStorage/pages/exitMaterial/exitMaterial.vue

644 lines
25 KiB
Vue

<template>
<view>
<view
class="single-exit"
v-for="(exit, index) in exitMaterialList"
:key="index">
<view class="exit-upper">
<view class="upper-lef">
{{
exit.backPerson == null
? ""
: exit.backPerson.slice(0, 1)
}}
</view>
<view class="upper-rig">
<h4 style="font-size: 16px">{{ exit.backPerson }}</h4>
<h4 style="color: #989898">{{ exit.unitName }}</h4>
</view>
</view>
<view class="exit-lower">
<view>
<span>退料工程</span>
<h4>{{ exit.lotName }}</h4>
</view>
<view>
<span>退料类型</span>
<h4>{{ exit.typeName }}</h4>
</view>
<view>
<span>联系方式</span>
<h4>{{ exit.phone }}</h4>
</view>
<view>
<span>申请时间</span>
<h4>{{ exit.backTime }}</h4>
</view>
</view>
<view class="exit-btns">
<view
style="background-color: #3788ff"
v-show="exit.typeId != null"
@click="seeDetail(exit.id, exit.typeId)">
<uni-icons style="color: #fff" type="eye"></uni-icons>
查看
</view>
<view
style="background-color: #fca30d"
v-show="exit.typeId == null"
@click="chooseMaterial(exit.agreementId, exit.id)">
<uni-icons style="color: #fff" type="compose"></uni-icons>
修改
</view>
<view
style="background-color: #ff4242"
@click="delOffer(exit.id)"
v-show="
exit.taskStatus != '40' &&
(store.includes('return:apply:del') ||
store.includes('*:*:*'))
">
<uni-icons style="color: #fff" type="trash"></uni-icons>
删除
</view>
</view>
<view class="sticky-area">
<h4 v-show="exit.taskStatus == '37'">待退料审核</h4>
<h4 v-show="exit.taskStatus == '38'">退料已审核</h4>
<h4 v-show="exit.taskStatus == '39'">退料核查中</h4>
<h4
v-show="exit.taskStatus == '40'"
style="border: 1px solid #27d870; color: #27d870">
退料完成
</h4>
<h4
v-show="exit.taskStatus == '101'"
style="border: 1px solid #ee603d; color: #ee603d">
退料审核驳回
</h4>
</view>
</view>
<uni-popup ref="popup" type="center" :mask-click="false">
<view class="popup">
<view class="pop-top">
<h4>新增退料申请</h4>
<uni-icons
style="color: #aaaaaa; font-weight: bold"
type="closeempty"
size="24"
@click="closePopup">
</uni-icons>
</view>
<view class="select-area">
<uni-forms
ref="exitForm"
:modelValue="exitFormData"
:rules="rules"
label-position="top">
<uni-forms-item
name="backPerson"
required
label="退料人"
label-width="150">
<uni-easyinput
style="width: 520rpx"
v-model="exitFormData.backPerson"
placeholder="请输入"></uni-easyinput>
</uni-forms-item>
<uni-forms-item
name="phone"
required
label="退料人电话"
label-width="150">
<uni-easyinput
style="width: 520rpx"
type="number"
maxlength="11"
v-model="exitFormData.phone"
placeholder="请输入"></uni-easyinput>
</uni-forms-item>
<uni-forms-item
name="unitId"
required
label="选择退料单位"
label-width="150">
<uni-data-select
style="width: 520rpx"
v-model="exitFormData.unitId"
:localdata="deptRange"
@change="deptChange"
:clear="false"></uni-data-select>
</uni-forms-item>
<uni-forms-item
name="lotId"
required
label="选择退料工程"
label-width="150">
<view class="project-select">
<uni-data-select
style="width: 520rpx"
v-model="exitFormData.lotId"
:localdata="projRange"
:clear="false"></uni-data-select>
</view>
</uni-forms-item>
<uni-forms-item
name="exitTime"
required
label="选择预退料时间"
label-width="150">
<uni-datetime-picker
style="width: 520rpx"
type="date"
:clear-icon="false"
v-model="exitFormData.exitTime" />
</uni-forms-item>
<uni-forms-item
name="remark"
label="备注"
label-width="150">
<uni-easyinput
style="width: 520rpx"
v-model="exitFormData.remark"
placeholder="请输入"></uni-easyinput>
</uni-forms-item>
<button class="submit-btn" @click="formSubmit">
确认
</button>
</uni-forms>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import { basePath } from "../../public";
import store from "../../store/user";
export default {
data() {
return {
exitFormData: {
backPerson: "",
phone: "",
unitId: "",
lotId: "",
exitTime: "",
remark: "",
},
store: store.state.permissions || [],
deptRange: [],
projRange: [],
rules: {
backPerson: {
rules: [
{
required: true,
errorMessage: "请输入退料人!",
},
],
},
phone: {
rules: [
{
required: true,
errorMessage: "请输入退料人电话!",
},
],
},
unitId: {
rules: [
{
required: true,
errorMessage: "请选择退料部门!",
},
],
},
lotId: {
rules: [
{
required: true,
errorMessage: "请选择退料工程!",
},
],
},
exitTime: {
rules: [
{
required: true,
errorMessage: "请选择预退料时间!",
},
],
},
},
exitMaterialList: [],
newAdd: {
taskType: "36",
taskStatus: "37",
createBy: uni.getStorageSync("userInfo").userid,
companyId: uni.getStorageSync("userInfo").sysUser.companyId,
agreementId: "",
unitId: "",
unitName: "",
// agreementName: '',
lotId: "",
phone: "",
backTime: "",
backPerson: "",
remark: "",
},
fetchedList: [],
phoneReg: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
};
},
methods: {
closePopup() {
this.$refs.popup.close();
},
deptChange(e) {
let that = this;
console.log(e, that.fetchedList);
for (let i = 0; i < that.fetchedList.length; i++) {
if (e == that.fetchedList[i].id) {
that.newAdd.unitName = that.fetchedList[i].name;
}
}
this.$api.fetchMaterial
.getProjList(
{
id: e,
},
null
)
.then((res) => {
console.log(res);
if (res.data.code == 200) {
that.projRange = res.data.data.map((item) => {
return {
text: item["name"],
value: item["id"],
};
});
}
})
.catch((err) => {
console.log(err);
});
},
formSubmit() {
let that = this;
that.$refs.exitForm.validate().then((formData) => {
console.log("formData", formData);
if (!that.phoneReg.test(formData.phone)) {
uni.showToast({
icon: "none",
title: "请输入正确格式的手机号!",
});
} else {
that.$refs.popup.close();
// 判断单位id和工程id是否匹配
that.$api.exitMaterial
.ifAgreementNew({
unitId: formData.unitId,
projectId: formData.lotId,
})
.then((res) => {
console.log("判断协议问题成功", res);
if (res.data.code == 200) {
if (res.data.data.agreementId != null) {
that.newAdd.agreementId =
res.data.data.agreementId;
that.newAdd.backPerson =
formData.backPerson;
that.newAdd.phone = formData.phone;
that.newAdd.unitId = formData.unitId;
that.newAdd.lotId = formData.lotId;
that.newAdd.backTime =
formData.exitTime;
that.newAdd.remark = formData.remark;
console.log(
"退料参数====",
that.newAdd
);
that.$api.exitMaterial
.newExitList(that.newAdd)
.then((res) => {
console.log(res);
if (res.data.code == 200) {
uni.showToast({
icon: "none",
title: "新增申请成功!",
success: () => {
uni.redirectTo({
url: "/pages/exitMaterial/exitMaterial",
});
},
});
}
})
.catch((err) => {
console.log(err);
});
}
}
})
.catch((err) => {
console.log("判断协议问题失败", err);
console.log(err);
});
}
});
},
seeDetail(id, typeId) {
uni.navigateTo({
url: `/pages/exitMaterialDetail/exitMaterialDetail?id=${id}&typeId=${typeId}`,
});
},
chooseMaterial(agreeId, id) {
uni.navigateTo({
url: `/pages/exitMaterialSelect/exitMaterialSelect?agreeId=${agreeId}&id=${id}`,
});
},
delOffer(id) {
console.log(id);
let that = this;
uni.showModal({
title: "删除申请",
content: "确认删除此条申请吗?",
success: (res) => {
if (res.confirm) {
that.$api.exitMaterial
.delMaterial({
id,
})
.then((delRes) => {
console.log(delRes);
if (delRes.data.code == 200) {
uni.showToast({
icon: "none",
title: "删除成功!",
success: () => {
uni.redirectTo({
url: "/pages/exitMaterial/exitMaterial",
});
},
});
} else {
uni.showToast({
icon: "none",
title: delRes.data.msg,
});
}
})
.catch((err) => {
console.log(err);
});
}
},
});
},
},
onNavigationBarButtonTap() {
this.$refs.popup.open();
},
onShow() {
let that = this;
that.$api.fetchMaterial
.getDeptList()
.then((res) => {
if (res.data.code == 200) {
// console.log(res, "获取单位和工程---");
that.fetchedList = res.data.data;
that.deptRange = res.data.data.map((item) => {
return {
text: item["name"],
value: item["id"],
};
});
}
})
.catch((err) => {
console.log(err);
});
console.log(uni.getStorageSync("userInfo").userid);
console.log(uni.getStorageSync("userInfo").sysUser.companyId);
// 初始化获取机具退料申请列表
that.$api.exitMaterial
.exitMaterialList({
companyId: uni.getStorageSync("userInfo").sysUser.companyId,
// companyId: 1
})
.then((res) => {
console.log(res);
if (res.data.code == 200) {
that.exitMaterialList = res.data.data;
} else if (res.data.code == 500) {
uni.showToast({
icon: "none",
title: "登录状态已过期,请重新登录!",
success: () => {
uni.removeStorageSync("token");
uni.removeStorageSync("userInfo");
uni.reLaunch({
// url: "/pages/login/login",
url: "/pages/nwLogin/index",
});
},
});
}
})
.catch((err) => {
console.log(err);
});
// 初始化获取退料单位,退料工程列表
// that.$api.fetchMaterial
// .getDeptList()
// .then((res) => {
// if (res.data.code == 200) {
// console.log(res);
// that.fetchedList = res.data.data;
// that.deptRange = res.data.data.map((item) => {
// return {
// text: item["name"],
// value: item["id"],
// };
// });
// console.log(that.deptRange, "**************");
// }
// })
// .catch((err) => {
// console.log(err);
// });
},
// async created() {
// console.log("页面被创建----");
// const res = await this.$api.fetchMaterial.getDeptList();
// console.log("获取的单位核工程", res);
// },
// onload() {
// that.$api.fetchMaterial
// .getDeptList()
// .then((res) => {
// if (res.data.code == 200) {
// console.log(res, "获取单位和工程---");
// that.fetchedList = res.data.data;
// that.deptRange = res.data.data.map((item) => {
// return {
// text: item["name"],
// value: item["id"],
// };
// });
// }
// })
// .catch((err) => {
// console.log(err);
// });
// },
};
</script>
<style lang="scss" scoped>
body {
background-color: #f8f8f8;
}
.single-exit {
width: 95%;
margin: 20rpx auto;
background-color: #fff;
border-radius: 15rpx;
box-sizing: border-box;
padding: 15rpx;
position: relative;
.exit-upper {
width: 100%;
box-sizing: border-box;
padding: 15rpx;
border-bottom: 1px solid #d7d7d7;
display: flex;
align-items: center;
.upper-lef {
width: 12%;
height: 5vh;
border-radius: 15rpx;
background-color: #409eff;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
.upper-rig {
flex: 1;
box-sizing: border-box;
padding: 10rpx 20rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
h4 {
font-weight: normal;
font-size: 14px;
}
}
}
.exit-lower {
width: 100%;
box-sizing: border-box;
padding: 15rpx;
border-bottom: 1px solid #d7d7d7;
view {
width: 100%;
display: flex;
align-items: center;
margin-bottom: 15rpx;
font-size: 14px;
span {
color: #9d9d9d;
padding-right: 20rpx;
}
h4 {
color: #000;
font-size: 14px;
font-weight: normal;
}
}
view:last-child {
margin-bottom: 0;
}
}
.exit-btns {
width: 100%;
box-sizing: border-box;
padding: 15rpx;
display: flex;
justify-content: flex-end;
view {
box-sizing: border-box;
padding: 8rpx 25rpx;
border-radius: 15rpx;
color: #fff;
margin-right: 15rpx;
font-size: 14px;
}
view:last-child {
margin-right: 0;
}
}
.sticky-area {
position: absolute;
top: 20rpx;
right: 20rpx;
/* width: 11vh;
height: 10vh;
image{
width: 100%;
height: 100%;
} */
h4 {
box-sizing: border-box;
padding: 8rpx 20rpx;
border-radius: 15rpx;
font-size: 14px;
font-weight: normal;
background-color: #fff;
border: 1px solid #3788ff;
color: #3788ff;
}
}
}
.popup {
width: 80vw;
height: 90vh;
background-color: #fff;
border-radius: 15rpx;
overflow-y: auto;
background: linear-gradient(#d9e7fe, #fff, #fff, #fff);
.pop-top {
width: 100%;
height: 5vh;
box-sizing: border-box;
padding: 0 25rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.select-area {
width: 85%;
margin: 40rpx auto;
.submit-btn {
background-color: #409eff;
color: #fff;
}
}
}
::v-deep .project-select .uni-select__input-text {
width: 450rpx;
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 用省略号表示超出部分 */
}
</style>