qiaopengfei
/
ag-element-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

22

This commit is contained in:
ln1778 2024-09-12 09:53:40 +08:00
parent ef3a38f1a7
commit 756f3307f3
6 changed files with 683 additions and 645 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "ag-element-ui", "name": "ag-element-ui",
"version": "0.1.4", "version": "0.1.6",
"main": "packages/index.js", "main": "packages/index.js",
"scripts": { "scripts": {
"dev": "vue-cli-service serve", "dev": "vue-cli-service serve",

73
packages/agForm/src/index.vue
View File

@ -3,18 +3,20 @@
<ag-row> <ag-row>
<ag-col v-for="item,index in data" :key="index" :span="item.span||24"> <ag-col v-for="item,index in data" :key="index" :span="item.span||24">
<el-form-item v-bind="item" :prop="item.enName" > <el-form-item v-bind="item" :prop="item.enName" >
<slot :name="item.enName"> <slot :name="item.soltName" v-if="item.soltName" :row="item"/>
<ag-input v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-input'"></ag-input> <div class="contentbox" v-else>
<ag-date-picker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-date-picker'"/> <ag-input v-model="formValue[item.enName]" type="textarea" v-bind="item" v-if="item.type=='ag-textarea'" size="small" clearable></ag-input>
<agSelect v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-select'" /> <ag-input v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-input'" size="small" clearable></ag-input>
<el-radio-group v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-radio'&&formValue[item.enName]" size="small" > <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 :label="it.value" v-for="it,index in item.options" :key="index">{{it.label}}</el-radio>
</el-radio-group> </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 v-for="it,index in item.options" :label="it.value" :key="index">{{it.label}}</el-checkbox>
</el-checkbox-group> </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-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'"></el-cascader> <el-cascader v-model="formValue[item.enName]" v-bind="item" size="small" v-if="item.type=='ag-cascader'" clearable></el-cascader>
<el-switch <el-switch
v-model="formValue[item.enName]" v-model="formValue[item.enName]"
v-bind="item" size="small" v-if="item.type=='ag-switch'&&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]" <el-slider v-model="formValue[item.enName]"
v-bind="item" size="small" v-if="item.type=='ag-slider'"></el-slider> v-bind="item" size="small" v-if="item.type=='ag-slider'"></el-slider>
<el-time-select <el-time-select
clearable
v-model="formValue[item.enName]" v-model="formValue[item.enName]"
v-bind="item" size="small" v-if="item.type=='ag-time-select'" v-bind="item" size="small" v-if="item.type=='ag-time-select'"
:picker-options="item.options"> :picker-options="item.options">
</el-time-select> </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> <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 v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-color-picker'" size="small">
</agColorPicker> </agColorPicker>
<el-transfer :data="item.data" v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-transfer'" size="small"></el-transfer> <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"/> <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"/> <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"/> <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> <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> </el-form-item>
</ag-col> </ag-col>
</ag-row> </ag-row>
@ -89,7 +92,7 @@ export default{
span:{ span:{
type:Number, type:Number,
default:24 default:24
} },
}, },
data(){ data(){
return{ return{
@ -109,13 +112,8 @@ export default{
} }
}, },
watch:{ watch:{
data(val){ value(val){
this.formValue = {}; this.formValue = val;
val.map((h)=>{
if(h.value){
this.formValue[h.enName] = h.value;
}
});
} }
}, },
methods:{ methods:{
@ -136,4 +134,37 @@ export default{
width:200px; 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> </style>

8
packages/agUpload/index.js
View File

@ -1,9 +1,9 @@
import agUpdate from './src' import agUpload from './src'
// 为组件提供 install 安装方法，供按需引入 // 为组件提供 install 安装方法，供按需引入
agUpdate.install = function (Vue) { agUpload.install = function (Vue) {
Vue.component(agUpdate.name, agUpdate) Vue.component(agUpload.name, agUpload)
} }
// 导出组件 // 导出组件
export default agUpdate; export default agUpload;

13
packages/agUpload/src/index.vue
View File

@ -69,7 +69,7 @@
<script> <script>
export default { export default {
name: "agUpdate", name: "agUpload",
props:{ props:{
isPrew:{ isPrew:{
type:Boolean, type:Boolean,
@ -470,11 +470,19 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
margin-top:12px;
}
.upload-list--text{ .upload-list--text{
margin: 0;
padding: 0;
list-style: none;
&:first-child{ &:first-child{
margin-top: 10px; margin-top: 10px;
} }
.uploadtextitem{
position: relative; position: relative;
list-style: none; list-style: none;
transition: all .5s cubic-bezier(.55,0,.1,1); transition: all .5s cubic-bezier(.55,0,.1,1);
@ -496,7 +504,7 @@
display:inline-block; display:inline-block;
} }
} }
}
.ag-upload-list__item-name{ .ag-upload-list__item-name{
text-decoration: none; text-decoration: none;
color: #606266; color: #606266;
@ -519,7 +527,6 @@
cursor: pointer; cursor: pointer;
} }
} }
}
.el-icon-close{ .el-icon-close{
position: relative; position: relative;
right: 5px; right: 5px;

6
packages/index.js
View File

@ -1,7 +1,7 @@
// 导入组件 // 导入组件
import agInput from './agInput/index'; import agInput from './agInput/index';
import agSelect from './agSelect/index'; import agSelect from './agSelect/index';
import agUpdate from './agUpload'; import agUpload from './agUpload';
import agForm from './agForm'; import agForm from './agForm';
import agColorPicker from './agColorPicker'; import agColorPicker from './agColorPicker';
import agQuery from './agQuery'; import agQuery from './agQuery';
@ -23,7 +23,7 @@ import agNumberRange from "./agNumberRange";
const components = [ const components = [
agInput, agInput,
agSelect, agSelect,
agUpdate, agUpload,
agForm, agForm,
agColorPicker, agColorPicker,
agQuery, agQuery,
@ -62,7 +62,7 @@ import agNumberRange from "./agNumberRange";
// 以下是具体的组件列表 // 以下是具体的组件列表
agInput, agInput,
agSelect, agSelect,
agUpdate, agUpload,
agForm, agForm,
agColorPicker, agColorPicker,
agQuery, agQuery,

4
src/App.vue
View File

@ -49,9 +49,9 @@
<div>{{row.date}} </div> <div>{{row.date}} </div>
</template> </template>
</agTable> </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> <div slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</agUpdate> </agUpload>
<ag-form :data="formdata" label-width="120px" label-position="right" v-model="formvalue"> <ag-form :data="formdata" label-width="120px" label-position="right" v-model="formvalue">
</ag-form> </ag-form>
<ag-mution-checkbox :datas="checklist" @onSearch="onCheckSearch" v-model="checkvalue"> </ag-mution-checkbox> <ag-mution-checkbox :datas="checklist" @onSearch="onCheckSearch" v-model="checkvalue"> </ag-mution-checkbox>