<template>
<div class="app-container">
<el-form
:model="dynamicValidateForm"
label-width="120px"
ref="dynamicValidateForm"
>
<el-form-item
:key="domain.name"
:label="domain.label"
:prop="domain.name"
:rules="rules"
v-for="domain in dynamicValidateForm.domains"
>
<el-input
type="text"
:disabled="domain.editable"
autocomplete="off"
v-model.number="domain.value"
v-if="domain.type === 'text'"
>
</el-input>
<el-input
type="text"
oninput="value=value.replace(/[^\d]/g,'')"
maxlength="9"
:disabled="domain.editable"
autocomplete="off"
v-model.number="domain.value"
v-if="domain.type === 'number'"
></el-input>
<el-date-picker
type="datetime"
:disabled="domain.editable"
v-model.number="domain.value"
v-if="domain.type === 'datetime'"
></el-date-picker>
<el-select
:disabled="domain.editable"
v-model.number="domain.value"
v-if="domain.type === 'xialakuang'"
placeholder
filterable
allow-create
default-first-option
>
<el-option
v-for="item in domain.options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<el-input
type="textarea"
:disabled="domain.editable"
autocomplete="off"
v-model.number="domain.value"
v-if="domain.type === 'textarea'"
size="mini"
style="width: 600px"
show-word-limit
rows="5"
>
</el-input>
<el-radio-group
:disabled="domain.editable"
v-model.number="domain.value"
v-if="domain.type === 'danxuan'"
>
<el-radio label="否">否</el-radio>
<el-radio label="是">是</el-radio>
</el-radio-group>
<el-checkbox-group
:disabled="domain.editable"
v-model.number="domain.value"
v-if="domain.type === 'duoxuan'"
>
<el-checkbox
v-for="item in domain.duoxuan_options"
:label="item"
:key="item"
:value="item"
>{{ item }}</el-checkbox
>
</el-checkbox-group>
</el-form-item>
<el-button type="primary" @click="add()">確定添加</el-button>
</el-form>
</div>
</template>
<script>
import { add } from "@/api/test";
export default {
data() {
return {
dynamicValidateForm: {
domains: [
{
name: "username",
label: "用戶名",
value: "",
editable: 0,
type: "text",
options: [],
duoxuan_options: [],
},
{
name: "num1",
label: "數(shù)量",
value: "",
editable: 0,
type: "number",
options: [],
duoxuan_options: [],
},
{
name: "addtime",
label: "添加時間",
value: this.moment(new Date())
.utcOffset(480)
.format("YYYY-MM-DD HH:mm:ss"),
editable: 0,
type: "datetime",
options: [],
duoxuan_options: [],
},
{
name: "username2",
label: "用戶名2",
value: "",
editable: 0,
type: "xialakuang",
options: [
{ value: "用戶1", label: "標簽1" },
{ value: "用戶2", label: "標簽2" },
{ value: "用戶3", label: "標簽3" },
],
},
{
name: "beizhu",
label: "備注",
value: "",
editable: 0,
type: "textarea",
options: [],
duoxuan_options: [],
},
{
name: "whether_agree",
label: "是否同意",
value: "否",
editable: 0,
type: "danxuan",
options: [],
duoxuan_options: [],
},
{
name: "chengshi",
label: "城市",
value: [],
editable: 0,
type: "duoxuan",
options: [],
duoxuan_options: ["北京", "上海", "深圳"],
},
],
},
rules: [],
};
},
methods: {
add() {
//先判斷表單是否通過了判斷
this.$refs.dynamicValidateForm.validate((valid) => {
//代表通過驗證 ,將參數(shù)傳回后臺
if (valid) {
let params = Object.assign({}, this.dynamicValidateForm);
var jsonstring = "";
var obj = {};
var duoxuan_string = ""; //多選字符串
this.dynamicValidateForm.domains.forEach((element) => {
if (element.type === "datetime") {
if (element.value) {
element.value = this.moment(element.value)
.utcOffset(480)
.format("YYYY-MM-DD HH:mm:ss");
}
} else if (element.type === "duoxuan") {
duoxuan_string = element.value + ",";
duoxuan_string = duoxuan_string.substring(
0,
duoxuan_string.length - 1
);
element.value = duoxuan_string;
}
this.$set(obj, element.name, element.value);
});
add(obj).then((res) => {
this.$message({
type: "info",
message: res.Message,
});
if (res.Code == 702) {
return;
}
this.$router.push("/patient/TEST/test_list");
});
}
});
},
},
};
</script>
<style scoped>
.line {
text-align: center;
}
</style>
