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",
"version": "0.1.4",
"version": "0.1.6",
"main": "packages/index.js",
"scripts": {
"dev": "vue-cli-service serve",

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

@ -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>

8
packages/agUpload/index.js
View File

@ -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;

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

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

6
packages/index.js
View File

@ -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,

4
src/App.vue
View File

@ -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>