UNION_HUTB/target/classes/views/platform/fw/wwj/sq.html

<!--#
layout("/layouts/platform.html"){
#-->
<style>
    #app{
        padding: 10px;
        height: 100%;
        overflow-y: auto;
    }
    .el-divider {
        background-color: #409EFF;
    }

    .el-divider__text {
        color: #409EFF;
    }

    .flexbox {
        display: flex;
    }

    .flexbox .el-form-item {
        width: 50%;
    }

    .el-form .el-select, .el-form .el-date-editor, .el-form .el-input-number {
        width: 100%;
    }

    .el-loading-spinner{
        font-size: 30px;
    }
    .el-collapse-item__arrow{
        color: red;
        font-size: 20px;
    }

</style>

<div id="app" v-cloak>
    <el-card style="width:100%;">
        <div slot="header" style="font-size: 20px;">
            慰问金申请
        </div>
        <el-form :model="formData" label-width="120px" ref="addForm" :rules="formRules">
            <el-divider content-position="left">基本信息</el-divider>
            <el-form-item label="申请人">
                <el-input placeholder="姓名" value="${@shiro.getPrincipalProperty('username')}"
                          readonly="true"></el-input>
            </el-form-item>
            <div class="flexbox">
                <el-form-item label="慰问对象" prop="wwuserid">
                    <el-select v-model="formData.wwuserid"
                               @change="wwuserChange"
                               filterable
                               remote
                               clearable
                               reserve-keyword
                               placeholder="输入工号或姓名查找,职称和慰问部门会自动匹配,如果缺失请手动补全"
                               :remote-method="querySqr">
                        <el-option v-for="o in wwuserlist" :label="o.username+'-'+o.loginname" :value="o.id"
                                   :key="o.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职称" prop="wwuserzc">
                   <el-input v-model="formData.wwuserzc"></el-input>
                </el-form-item>
            </div>
            <div>
                <el-form-item label="慰问部门" prop="wwbm">
                    <el-input v-model="formData.wwbm"></el-input>
                </el-form-item>
            </div>
            <div class="flexbox">
                <el-form-item label="拟慰问时间" prop="planwwsj">
                    <el-date-picker value-format="yyyy-MM-dd" v-model="formData.planwwsj">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="申请金额(元)" prop="wwsqje">
                    <el-input-number v-model="formData.wwsqje"
                                     precision="2"
                                    :controls="false"
                                     max="100000.00"
                                     min="0.00"
                    ></el-input-number>
                </el-form-item>
            </div>
            <div>
                <el-form-item label="申请事由" prop="wwsqsy">
                    <el-input placeholder="请填写慰问金申请事由" type="textarea" :autosize="{ minRows: 4, maxRows: 8}"
                              maxlength="1000" v-model.trim="formData.wwsqsy"></el-input>
                </el-form-item>
            </div>
            <div>
                <sign prefix="wwjsq" :qz.sync="formData.sqrqz"></sign>
            </div>

        </el-form>
        <div style="text-align: right;margin-top: 20px;">
            <el-button type="primary" @click="doAdd">确 定</el-button>
        </div>
    </el-card>


</div>

<script>
    const rules = {
        wwuserid: [{required: true, message: '请查询并选择慰问对象', trigger: ['blur', 'change']}],
        wwuserzc: [{required: true, message: '请填写慰问对象职称', trigger: ['blur', 'change']}],
        planwwsj: [{required: true, message: '请填写拟慰问时间', trigger: ['blur', 'change']}],
        wwsqje: [{required: true, message: '请填写申请金额(元)', trigger: ['blur', 'change']}],
        wwsqsy: [{required: true, message: '请填写申请事由', trigger: ['blur', 'change']}],
        wwbm: [{required: true, message: '请填写慰问部门', trigger: ['blur', 'change']}]
    }

    let vue = new Vue({
        el: '#app',
        data() {
            return {
                formData: {
                    sqrqz:''
                },
                addDialogVisible: false,
                formRules: rules,
                fileList: [],
                wwuserlist: [],
            }
        },
        components: {
            'sign': httpVueLoader('/components/sign/sign.vue?v=2.0.0'),
        },
        methods: {
            async querySqr(key) {
                const data = await selectUser(key,10)
                this.wwuserlist = data.list
            },
            wwuserChange(val){
                if(val===''){
                    this.$set(this.formData,'wwuserzc','')
                    this.$set(this.formData,'wwbm','')
                }else{
                    let u = this.wwuserlist.find(u=>u.id === val)
                    this.$set(this.formData,'wwuserzc',u.zc)
                    this.$set(this.formData,'wwbm',u.dwname)
                }
            },
            doAdd() {
                this.$refs["addForm"].validate(valid => {
                    if (valid) {
                        if(this.formData.sqrqz===''){
                            this.$message.info('请签名后再提交！')
                            return
                        }
                        $.post('/platform/zgfw/wwjsq/doAdd',this.formData).then(res=>{
                            if(res.code===0){
                                this.$message.success(res.msg)
                                setTimeout(()=>{
                                    window.location.replace('/platform/zgfw/wwjsqxx')
                                },200)
                            }
                        })
                    }
                })
            }
        }
    })
</script>



<!--#
}
#-->