liunan #10
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "ag-element-ui",
|
||||
"version": "0.1.4",
|
||||
"version": "0.1.6",
|
||||
"main": "packages/index.js",
|
||||
"scripts": {
|
||||
"dev": "vue-cli-service serve",
|
||||
|
|
|
|||
|
|
@ -3,18 +3,20 @@
|
|||
<ag-row>
|
||||
<ag-col v-for="item,index in data" :key="index" :span="item.span||24">
|
||||
<el-form-item v-bind="item" :prop="item.enName" >
|
||||
<slot :name="item.enName">
|
||||
<ag-input v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-input'"></ag-input>
|
||||
<ag-date-picker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-date-picker'"/>
|
||||
<agSelect v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-select'" />
|
||||
<el-radio-group v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-radio'&&formValue[item.enName]" size="small" >
|
||||
<slot :name="item.soltName" v-if="item.soltName" :row="item"/>
|
||||
<div class="contentbox" v-else>
|
||||
<ag-input v-model="formValue[item.enName]" type="textarea" v-bind="item" v-if="item.type=='ag-textarea'" size="small" clearable></ag-input>
|
||||
<ag-input v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-input'" size="small" clearable></ag-input>
|
||||
<ag-date-picker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-date-picker'" size="small" clearable/>
|
||||
<agSelect v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-select'" size="small" clearable/>
|
||||
<el-radio-group v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-radio'&&formValue[item.enName]" size="small" clearable>
|
||||
<el-radio :label="it.value" v-for="it,index in item.options" :key="index">{{it.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-checkbox-group v-bind="item" v-if="item.type=='ag-checkbox'&&formValue[item.enName]" v-model="formValue[item.enName]" size="small">
|
||||
<el-checkbox-group v-bind="item" v-if="item.type=='ag-checkbox'&&formValue[item.enName]" v-model="formValue[item.enName]" size="small" clearable>
|
||||
<el-checkbox v-for="it,index in item.options" :label="it.value" :key="index">{{it.label}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<el-input-number v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-input-number'" ></el-input-number>
|
||||
<el-cascader v-model="formValue[item.enName]" v-bind="item" size="small" v-if="item.type=='ag-cascader'"></el-cascader>
|
||||
<el-input-number v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-input-number'" clearable></el-input-number>
|
||||
<el-cascader v-model="formValue[item.enName]" v-bind="item" size="small" v-if="item.type=='ag-cascader'" clearable></el-cascader>
|
||||
<el-switch
|
||||
v-model="formValue[item.enName]"
|
||||
v-bind="item" size="small" v-if="item.type=='ag-switch'&&formValue[item.enName]" >
|
||||
|
|
@ -22,20 +24,21 @@
|
|||
<el-slider v-model="formValue[item.enName]"
|
||||
v-bind="item" size="small" v-if="item.type=='ag-slider'"></el-slider>
|
||||
<el-time-select
|
||||
clearable
|
||||
v-model="formValue[item.enName]"
|
||||
v-bind="item" size="small" v-if="item.type=='ag-time-select'"
|
||||
:picker-options="item.options">
|
||||
</el-time-select>
|
||||
<ag-upload v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-upload'"></ag-upload>
|
||||
<ag-upload v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-upload'" clear isPre></ag-upload>
|
||||
<el-rate v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-rate'" size="small"></el-rate>
|
||||
<agColorPicker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-color-picker'" size="small">
|
||||
</agColorPicker>
|
||||
<el-transfer :data="item.data" v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-transfer'" size="small"></el-transfer>
|
||||
<agNumberRange v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-numberRange'" size="small"/>
|
||||
<agMultifunctionSearch v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multifunction-search'" size="small"/>
|
||||
<agQuery v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-query'" size="small"/>
|
||||
<agNumberRange v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-numberRange'" size="small" clearable/>
|
||||
<agMultifunctionSearch v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multifunction-search'" size="small" clearable/>
|
||||
<agQuery v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-query'" size="small" clearable/>
|
||||
<ag-mution-checkbox :datas="item.datas" :placeholder="item.placeholder" v-model="formValue[item.enName]" v-if="item.type=='ag-mution-checkbox'" size="small"> </ag-mution-checkbox>
|
||||
</slot>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</ag-col>
|
||||
</ag-row>
|
||||
|
|
@ -89,7 +92,7 @@ export default{
|
|||
span:{
|
||||
type:Number,
|
||||
default:24
|
||||
}
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
|
|
@ -109,13 +112,8 @@ export default{
|
|||
}
|
||||
},
|
||||
watch:{
|
||||
data(val){
|
||||
this.formValue = {};
|
||||
val.map((h)=>{
|
||||
if(h.value){
|
||||
this.formValue[h.enName] = h.value;
|
||||
}
|
||||
});
|
||||
value(val){
|
||||
this.formValue = val;
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
|
@ -136,4 +134,37 @@ export default{
|
|||
width:200px;
|
||||
}
|
||||
}
|
||||
.el-form--inline{
|
||||
.el-form-item{
|
||||
display:flex;
|
||||
}
|
||||
.el-form-item__content{
|
||||
flex:1;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
.contentbox{
|
||||
width:100%;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
::v-deep{
|
||||
.el-form--inline{
|
||||
.el-form-item{
|
||||
display:flex;
|
||||
}
|
||||
.el-form-item__content{
|
||||
flex:1;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
.el-form-item{
|
||||
width:100%;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item__content{
|
||||
flex:1;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import agUpdate from './src'
|
||||
import agUpload from './src'
|
||||
|
||||
// 为组件提供 install 安装方法，供按需引入
|
||||
agUpdate.install = function (Vue) {
|
||||
Vue.component(agUpdate.name, agUpdate)
|
||||
agUpload.install = function (Vue) {
|
||||
Vue.component(agUpload.name, agUpload)
|
||||
}
|
||||
|
||||
// 导出组件
|
||||
export default agUpdate;
|
||||
export default agUpload;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,7 +1,7 @@
|
|||
// 导入组件
|
||||
import agInput from './agInput/index';
|
||||
import agSelect from './agSelect/index';
|
||||
import agUpdate from './agUpload';
|
||||
import agUpload from './agUpload';
|
||||
import agForm from './agForm';
|
||||
import agColorPicker from './agColorPicker';
|
||||
import agQuery from './agQuery';
|
||||
|
|
@ -23,7 +23,7 @@ import agNumberRange from "./agNumberRange";
|
|||
const components = [
|
||||
agInput,
|
||||
agSelect,
|
||||
agUpdate,
|
||||
agUpload,
|
||||
agForm,
|
||||
agColorPicker,
|
||||
agQuery,
|
||||
|
|
@ -62,7 +62,7 @@ import agNumberRange from "./agNumberRange";
|
|||
// 以下是具体的组件列表
|
||||
agInput,
|
||||
agSelect,
|
||||
agUpdate,
|
||||
agUpload,
|
||||
agForm,
|
||||
agColorPicker,
|
||||
agQuery,
|
||||
|
|
|
|||
|
|
@ -49,9 +49,9 @@
|
|||
<div>{{row.date}} </div>
|
||||
</template>
|
||||
</agTable>
|
||||
<agUpdate @onUpload="onUpload" isDrap dragmove multiple :limit="5" @onError="onError" :maxSize="1024*1024" :value="filelist">
|
||||
<agUpload @onUpload="onUpload" isDrap dragmove multiple :limit="5" @onError="onError" :maxSize="1024*1024" :value="filelist">
|
||||
<div slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</agUpdate>
|
||||
</agUpload>
|
||||
<ag-form :data="formdata" label-width="120px" label-position="right" v-model="formvalue">
|
||||
</ag-form>
|
||||
<ag-mution-checkbox :datas="checklist" @onSearch="onCheckSearch" v-model="checkvalue"> </ag-mution-checkbox>
|
||||
|
|
|
|||
Loading…
Reference in New Issue