input输入框的一些复习
<template>
<div>
<div style="text-align: center;margin: 10px 0;">
<span style="font-size: 15px;font-weight: bold;">input输入框的基本应用</span>
</div>
<el-descriptions :column="3" size="default" border>
<el-descriptions-item label="部门" label-align="center" :span="1">
<el-select v-model="formData_Value.name" placeholder="请选择姓名" filterable size="small">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-descriptions-item>
<el-descriptions-item label="直接上级" label-align="center" :span="2">
<el-input v-model="formData_Value.name" disabled size="small" />
</el-descriptions-item>
<el-descriptions-item label-align="center" :span="3">
<template #label>
<div>
<h2>劳动合同</h2>
<h2>签订情况</h2>
</div>
</template>
劳动合同签订情况aaaaa
</el-descriptions-item>
<el-descriptions-item label="续签期限" label-align="center" :span="3">
<div style="height: 50px;">
<el-radio-group v-model="ContractTime" @change="onChange_ContractTime">
<el-radio :label="true" size="small">有固定期限</el-radio>
<el-radio :label="false" size="small">无固定期限</el-radio>
</el-radio-group>
<div v-if="ContractTime" style="display: flex;" class="animate__animated animate__backInDown">
<div>续签时长</div>
<div contenteditable :class="{ StyleInput: inputStyle }"
:style="{ borderBottom: inputStyle ? '1px solid #ff0000' : '1px solid #000' }"
style="width: 80px;text-align: center;" @blur="handleBlur" @focus="changeText">
{{ formData_Value.ContractTime }}
</div>
<div>月</div>
<div>
<div>续签时长</div>
<input type="number" class="StyleInput" v-model="formData_Value.ContractTime" @change="handleChange" />
<div>月</div>
</div>
</div>
</div>
</el-descriptions-item>
<el-descriptions-item label="备注" label-align="center" :span="3">
<el-input v-model="formData_Value.remark" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
placeholder="请输入备注" show-word-limit maxlength="500" />
</el-descriptions-item>
<el-descriptions-item label="申请人" label-align="center" :span="3">
{{ formData_Value.fillname }}
</el-descriptions-item>
</el-descriptions>
<div style="margin-top: 15px;display: flex;width: 100%;justify-content: center;">
<div style="padding: 6px 8px;background-color:#36d;color:#fff;width: 150px;text-align: center; cursor: pointer;"
@click="onClick_ok">提
交
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import {
ElMessage,
} from "element-plus";
const router = useRouter();
const route = useRoute();
const store = useStore();
let queryParams = ref({
Cookie_USER: null,
item: null
})
let props = defineProps({
tableItem: {
type: Object,
default: {},
},
})
const ContractTime = ref(true)
const formData_Value = ref({
meancode: '',//合同编号 HTXQ + 年月日时分秒 + 2位随机数
badge: '',//工号
name: '',//姓名
age: '',//年龄
deptname: '',//部门
supplier: '',//岗位
lead: '',//直接领导
ContractTime: 1,//需求期限 无固定期限，写600
checksate: 0,//进程状态
remark: '',//备注 500字
fillname: '',//申请人
filltime: '',//申请时间
})
const options = [
{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
}
]
const onChange_ContractTime = (val) => {
if (val) {
formData_Value.value.ContractTime = 1
} else {
formData_Value.value.ContractTime = 600
}
}
const inputStyle = ref(false)
const handleBlur = (event) => {
inputStyle.value = false
formData_Value.value.ContractTime = event.target.innerText ? event.target.innerText : 1
}
const changeText = (value) => {
console.log('输入的内容', value)
inputStyle.value = true
}
const handleChange = (event) => {
console.log('这个触发了', event.target.value)
console.log('这个触发了', event.target)
if (event.target.value > 0) {
formData_Value.value.ContractTime = event.target.value
} else {
formData_Value.value.ContractTime = 1
}
}
const onClick_ok = () => {
let obj = {
meancode: formData_Value.value.meancode,//合同编号 HTXQ + 年月日时分秒 + 2位随机数
badge: formData_Value.value.badge,//工号
name: formData_Value.value.name,//姓名
age: formData_Value.value.age,//年龄
deptname: formData_Value.value.deptname,//部门
supplier: formData_Value.value.supplier,//岗位
lead: formData_Value.value.lead,//直接领导
ContractTime: Number(formData_Value.value.ContractTime),//需求期限 无固定期限，写600
checksate: 0,//进程状态
remark: formData_Value.value.remark,//备注 500字
fillname: formData_Value.value.fillname,//申请人
filltime: formData_Value.value.filltime,//申请时间
}
if (
[
{
field: "deptname",
message: "请选择部门",
},
{
field: "name",
message: "请选择姓名",
},
{
field: "ContractTime",
message: "请输入续签时长",
}
].every((item) => validateFields(item, obj))
) {
if (obj.ContractTime > 0) {
console.log('需要提交的', obj)
} else {
ElMessage({
message: "续签时间必须大于0",
type: "error",
});
}
}
}
onMounted(() => {
store.dispatch("examine/COOLIE_VALUE_USER");
queryParams.value.Cookie_USER = store.state.examine.cookieUser;
if (queryParams.value.Cookie_USER.id) {
ContractTime.value = true
queryParams.value.item = props.tableItem;
formData_Value.value.meancode = 66;
formData_Value.value.fillname = queryParams.value.Cookie_USER.realname;
formData_Value.value.ContractTime = 1
} else {
ElMessage({
message: '账号信息为空，请重新登录',
type: 'warning',
})
}
})
const validateFields = ({ field, message }, obj) => {
const value = obj[field];
if (value === null || value === undefined || value === "") {
ElMessage({
showClose: true,
message: message,
type: "error",
});
return false;
}
const trimmedValue = String(value).trim();
if (!trimmedValue) {
ElMessage({
showClose: true,
message: message,
type: "error",
});
return false;
}
return true;
};
</script>
<style scoped></style>
<style scoped lang="less">
.StyleInput {
color: #ff0000;
border: none;
outline: none;
border-bottom: 1px solid red;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
transition: border-bottom-color 0.3s ease;
}
</style>