95 lines
2.9 KiB
Vue
95 lines
2.9 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="row" style="margin: 10px">
|
|
<div v-if="dataList.length > 0" class="col-md-12">
|
|
<div class="container">
|
|
<div class="row" v-for="(item, index) in dataList">
|
|
<div :class="type === 2 ? 'col-md-4' : 'col-md-5'">
|
|
<div class="form-group">
|
|
<input
|
|
v-model="item.login"
|
|
type="text"
|
|
placeholder="Login"
|
|
class="form-control"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div :class="type === 2 ? 'col-md-4' : 'col-md-5'">
|
|
<div class="form-group">
|
|
<input
|
|
v-model="item.pwd"
|
|
type="text"
|
|
placeholder="Password"
|
|
class="form-control"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<a @click="removeItem(index)" href="#" class="btn btn-danger"
|
|
><i class="fa fa-user-times"></i
|
|
></a>
|
|
</div>
|
|
<div v-if="type === 2" class="col-md-2">
|
|
<form ref="login" :action="url" method="POST">
|
|
<button class="btn btn-success">
|
|
<i class="fa fa-sign-in-alt"></i>
|
|
</button>
|
|
<input type="hidden" name="log" :value="String(item.login)" />
|
|
<input type="hidden" name="pwd" :value="String(item.pwd)" />
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12 text-center">
|
|
<button @click="newItem" class="btn btn-primary" type="button">
|
|
<i class="fa fa-user-plus"></i>
|
|
</button>
|
|
<input type="hidden" :name="name" :value="JSON.stringify(dataList)" required />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
export default defineComponent({
|
|
beforeMount() {
|
|
if (!this.$attrs.json) {
|
|
throw new Error("this component requires json");
|
|
}
|
|
},
|
|
mounted() {
|
|
const json = String(this.$attrs.json ?? ""),
|
|
data = JSON.parse(json);
|
|
this.name = data.name;
|
|
this.url = data.url;
|
|
this.type = data.type;
|
|
this.dataList = data.dataList;
|
|
},
|
|
data(): {
|
|
name: string;
|
|
url: string;
|
|
dataList: LaravelModelList;
|
|
type: number;
|
|
} {
|
|
return {
|
|
name: "",
|
|
url: "",
|
|
type: 2,
|
|
dataList: [],
|
|
};
|
|
},
|
|
watch: {},
|
|
methods: {
|
|
newItem() {
|
|
this.dataList.push({ login: "", pwd: "" });
|
|
},
|
|
removeItem(index: number) {
|
|
this.dataList.splice(index, 1);
|
|
},
|
|
},
|
|
});
|
|
</script>
|