vue-autoui
vue-autoui vue``element
UIauto-form``auto-grid
;
.auto-form``auto-grid``json``html
webapi``webapi
UI
vuejsjson
UI
<auto-form ref="form" v-model="data" size="mini" :info="info">
</auto-form>
<el-button @click="if($refs.form.success()){alert(JSON.stringify(data))}"></el-button>
json
data(){
return {
info: { items: [] },
data: { },
};
},
mounted(){
var items = [];
items.push({
name: 'active', label: '', rules: [
{ required: true, message: '', trigger: 'blur' },
{ min: 3, max: 5, message: ' 3 5 ', trigger: 'blur' }
]
});
items.push({
name: 'region', label: '', type: 'select',
data: [{ value: '' }, { value: '' }, { value: '' }, { value: '' }],
rules: [{ required: true, message: '', trigger: 'change' }],
eof: true
});
items.push({ name: 'starttime', label: '', type: 'date', rules: [{ type: 'date', required: true, message: '', trigger: 'change' }] });
items.push({ name: 'endtime', label: '-', type: 'date', eof: true, rules: [{ type: 'date', required: true, message: '', trigger: 'change' }] });
items.push({ name: 'instant', type: 'switch', label: '', eof: true });
items.push({
name: 'nature', type: 'checkbox', label: '',
rules: [{ type: 'array', required: true, message: '', trigger: 'change' }],
data: [{ value: '/' }, { value: '' }, { value: '' }, { value: '' }], eof: true
});
items.push({
name: 'resource', label: '', type: 'radio', rules: [{ required: true, message: '', trigger: 'change' }],
data: [{ value: '' }, { value: '' }], eof: true
});
items.push({ name: 'remark', label: '', type: 'remark', rules: [{ required: true, message: '', trigger: 'blur' }] })
this.info = { items: items}
}
json
:
json``html``BeetleX.FastHttpApi
vue-autoui``BeetleX.FastHttpApi
UIapi``BeetleX.FastHttpApi``BeetleX.FastHttpApi.ApiDoc
UIJSON
auto-form``webapi
<div>
<auto-form ref="login" url="/login" v-model="login.data" size="mini">
</auto-form>
<el-button size="mini" @click="if($refs.login.success())login.post()">
</el-button>
</div>
UIurl
webapiUI;:
[Input(Label = "", Name = "name", Eof = true)]
[Required("", Name = "name")]
[Input(Label = "", Name = "pwd", Type = "password", Eof = true)]
[Required("", Name = "pwd")]
[Input(Label = "", Value = true, Name = "saveStatus")]
public bool Login(string name, string pwd, bool saveStatus)
{
Console.WriteLine($"name:{name} pwd:{pwd} saveStatus:{saveStatus}");
return name == "admin";
}
<div>
<auto-form ref="login" url="/register" v-model="register.data" size="mini" @completed="onCompleted">
</auto-form>
<el-button size="mini" @click="if($refs.login.success())register.post()">
</el-button>
</div>
UIurl``completed
UIjavascript
data(){
return {
register: new beetlexAction('/register', {}),
checkConfirmPassword: (rule, value, callback) => {
var password = this.$refs.login.getField('Password');
var cpassword = this.$refs.login.getField('ConfirmPassword');
if (password.value != cpassword.value)
callback(new Error('!'));
else
callback();
},
}
},
methods: {
onCompleted(){
this.$refs.login.getField('ConfirmPassword').rules.push({ validator: this.checkConfirmPassword, trigger: 'blur' });
},
},
mounted() {
this.register.requested = (r) => {
alert(JSON.stringify(r));
};
}
[Post]
public RegisterDto Register(RegisterDto register)
{
Console.WriteLine(Newtonsoft.Json.JsonConvert.SerializeObject(register));
return register;
}
public class RegisterDto
{
[Input(Label = "", Eof = true)]
[Required("")]
[DataRange("3", Min = 3)]
public string Name { get; set; }
[Input(Label = "", Eof = true)]
[Required("", Type = "email")]
public string Email { get; set; }
[Input(Label = "", Eof = true, Type = "password")]
[Required("")]
public string Password { get; set; }
[Input(Label = "", Eof = true, Type = "password")]
[Required("")]
public string ConfirmPassword { get; set; }
[GenderInput(Label = "", Value = "", Eof = true)]
public string Gender { get; set; }
[Required("")]
[CityInput(Label = "", Eof = true)]
public string City { get; set; }
[HobbyInput(Label = "")]
[Required("", Type = "array", Trigger = "change")]
public string[] Hobby { get; set; }
}
.:
auto-grid
:
<auto-grid url="/employees" @completed="employees.get()"
@itemchange="onItemChange"
@itemdelete="onItemDelete"
@command="onCommand"
:data="employees.result"
size="mini" height="100%"
edit="true" delete="true">
</auto-grid>
:
data(){
return {
employees: new beetlexAction('/employees', {}, [])
}
},
methods: {
onCommand(e){
this.$open('models-employee', e.data);
},
onItemChange(item){
if (confirm('' + item.data.FirstName + '?')) {
item.success();
}
},
onItemDelete(item){
if (confirm('' + item.data.FirstName + '?')) {
item.success();
}
},
},
mounted() {
}
api
[Column("FirstName", Type = "link")]
[Column("LastName", Read = true)]
[Column("Title")]
[Column("HomePhone")]
[Column("City")]
[Column("Address")]
public object Employees()
{
return DataHelper.Defalut.Employees;
}
auto-form``auto-grid
<auto-form url="/orders" v-model="orders.data" @completed="orders.get()" size="mini" @fieldchange="orders.get()">
</auto-form>
<auto-grid url="/orders" height="300" :data="orders.result.items" :pages="orders.result.pages" :currentpage="orders.result.index" @pagechange="onPageChange" size="mini">
</auto-grid>
auto-form``fieldchange
,:
data(){
return {
orders: new beetlexAction("/orders", {}, { index: 0, pages: 0, items: [] })
};
},
methods: {
onPageChange(page){
this.orders.data.index = page;
this.orders.get();
},
},
mounted(){
}
[Input(Name = "id", Type = "select", DataUrl = "/EmployeeSelecter", Label = "",NullOption =true)]
[Input(Name = "customerid", Type = "select", DataUrl = "/CustomerSelecter", Label = "",NullOption =true, Eof = true)]
[SizeInput(Name = "size", Label = "")]
[Input(Name = "index", Hide = true)]
[Column("OrderID", Read = true)]
[Column("EmployeeID", Type = "select", DataUrl = "/EmployeeSelecter")]
[Column("CustomerID", Type = "select", DataUrl = "/CustomerSelecter")]
[Column("OrderDate", Type = "date")]
[Column("RequiredDate", Type = "date")]
[Column("ShippedDate", Type = "date")]
public object Orders(int id, string customerid, int index, int size, IHttpContext context)
{
Func<Order, bool> exp = o => (id == 0 || o.EmployeeID == id)
&& (string.IsNullOrEmpty(customerid) || o.CustomerID == customerid);
int count = DataHelper.Defalut.Orders.Count(exp);
if (size == 0)
size = 20;
int pages = count / size;
if (count % size > 0)
pages++;
var items = DataHelper.Defalut.Orders.Where(exp).Skip(index * size).Take(size);
return new { pages, index, items };
}