vue table 編輯

<template>
        <ux-spin :spinning="spinning" :wrap-style="{'width':'100%'}">
        <span slot="tip">任務添加中 ...</span>
        <div class="ux-layout-main" style="padding: 25px 0px 25px 25px;">
            <div style="margin-bottom: 10px;">
                <span slot="title">基本信息</span>
                <ux-form ref="batchForm">
                    <ux-form-item style="height:54px;" :label-col="labelCol" :wrapper-col="wrapperCol" label="任務名稱:">
                        <ux-field-decorator name="taskName" rules="required">
                            <ux-input v-model="form.taskName" />
                        </ux-field-decorator>
                    </ux-form-item>

                    <ux-form-item style="height:54px;" :label-col="labelCol" :wrapper-col="wrapperCol" label="平臺:">
                        <ux-field-decorator name="platformId"  rules="required">
                            <ux-select v-model="form.platformId" placeholder="請選擇" @change="getTypeLst">
                                <ux-option v-for="platform in platforms" :key="platform.ptiId" :label="platform.ptiName" :value="platform.ptiId"></ux-option>
                            </ux-select>
                        </ux-field-decorator>
                    </ux-form-item>

                    <ux-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="升級範圍:">
                        <ux-radio-group v-model="machineType">
                            <ux-radio value="1" label="所有機器(含禁用)"/>
                            <ux-radio value="2" label="已啓用機器"/>
                        </ux-radio-group>
                    </ux-form-item>

                    <ux-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="描述:">
                        <ux-field-decorator name="taskDesc" rules="required">
                            <ux-textarea v-model="form.taskDesc" row="5"></ux-textarea>
                        </ux-field-decorator>
                    </ux-form-item>

                    <ux-upload name="inputFile" :data="params" action="/versionMgn/upload" :show-upload-list="false" :before-ready="onBeforeReady" :before-upload="onBeforeUpload" @change="onChange" @progress="onProgress" multiple>
                        <ux-button icon="upload">選擇文件</ux-button>
                        <span style="margin-left:8px">{{fileName}}</span>
                    </ux-upload>

                    <article class="doc" style="margin-top:10px;">
                        <ux-table :columns="columns" v-model="data" :loading="loading" size="middle" bordered/>
                    </article>

                    <div style="text-align: left;margin: 7px 0px 0px 204px;">
                        <button class="ux-btn ux-btn-primary" @click="saveTaskBefore()">確定</button>
                        <button class="ux-btn ux-btn-success" style="margin-left:10px;" @click="cancel()">取消</button>
                    </div>
                </ux-form>
            </div>
        </div>
        </ux-spin>
</template>
<script>

    import service from 'servicePath/index';
    import UxMessage from '@suning/uxcool/es/message';
    import UxModal from '@suning/uxcool/es/modal';

    const EditableSelectCell = {
        props: {
            value: {
                type: String,
                default: '',
            },
            modules: {
                type: Array,
                default: [],
            },
        },
        methods: {
            onOk(e) {
                this.editable = false;
                const val = this.$refs.selectRef.value;
                if (val !== this.value) {
                    this.$emit('change', val, e);
                }
            },
        },
        render() {
            const {value, modules, onOk} = this;
            const editElement = (
                <div class="editable-cell-input-wrapper">
                    <!--
                    <select ref="selectRef" on-change={onOk}>
                        {modules.map((m) => (<option value={m} selected={m==value}>{m}</option>))}
                    </select>-->

                    <ux-select ref="selectRef" value={value} placeholder="請選擇" on-change={onOk} >
                            {modules.map((m) => (<ux-option value={m} label={m}/>))}
                    </ux-select>
                </div>
            );
            return <div class="editable-cell">{editElement}</div>;
        }
    };

    const EditableMulteSelectCell = {
        props: {
            value: {
                type: String,
                default: '',
            },
            modules: {
                type: Array,
                default: [],
            },
        },
        methods: {
            onOk(e) {
                this.editable = false;
                const val = this.$refs.selectRef.value;
                var tempNodeType = [];
                var node = [];
                if (e.length > 0){
                    for (let i = 0; i < e.length; i++){
                        node.push(e[i].label);
                    }
                }
                

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章