|
|
@@ -7,6 +7,92 @@
|
|
|
<span class="last"> / 发送问卷</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="c_top adfacjb">
|
|
|
+ <span>企业员工培训需求调查问卷</span>
|
|
|
+ <el-button type="primary">预览问卷</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="c_set">
|
|
|
+ <div class="cs_title" style="margin-top: 0;">选择项目成员</div>
|
|
|
+ <div class="cs_users adf">
|
|
|
+ <div class="cu_l adfacjb">
|
|
|
+ <img src="@/assets/images/agent/users_mini.png">
|
|
|
+ <div class="cul_add" @click="handleAddUser">+ 添加</div>
|
|
|
+ </div>
|
|
|
+ <div class="cu_r adfac">
|
|
|
+ <div class="cr_item adfacjb" v-for="(item,index) in params.persons" :key="index">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ <img src="@/assets/images/agent/remove_mini.png" @click="handleRemoveUser(item,index)">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cs_title">问卷回答设置</div>
|
|
|
+ <div class="cs_zd adfac">
|
|
|
+ <span>只允许作答</span>
|
|
|
+ <el-input-number v-model="params.times" :min="1" controls-position="right" style="margin: 0 9px;"></el-input-number>
|
|
|
+ <span>次</span>
|
|
|
+ </div>
|
|
|
+ <div class="cs_title">问卷作答时间设置</div>
|
|
|
+ <div class="cs_time">
|
|
|
+ <div class="ct_pre adfac">
|
|
|
+ <span>开始时间</span>
|
|
|
+ <el-date-picker v-model="params.startTime" type="datetime" placeholder="选择开始时间" style="width:311px;"></el-date-picker>
|
|
|
+ </div>
|
|
|
+ <div class="ct_pre adfac">
|
|
|
+ <span>截止时间</span>
|
|
|
+ <el-date-picker v-model="params.endTime" type="datetime" placeholder="选择截止时间" style="width:311px;"></el-date-picker>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cs_btn adfac">
|
|
|
+ <el-button type="primary" @click="handleConfirm">确认</el-button>
|
|
|
+ <el-button type="default" @click="handleBack">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog width="790px" :visible.sync="userShow" title="选择成员" @close="userShow=false">
|
|
|
+ <div class="ed_coach adf">
|
|
|
+ <div class="ec_l">
|
|
|
+ <el-input placeholder="请输入成员名搜索" suffix-icon="el-icon-search" v-model="userName" style="width: 100%;"></el-input>
|
|
|
+ <template v-if="!checkShow">
|
|
|
+ <div class="ecl_gs">
|
|
|
+ <div class="eg_title">按项目选</div>
|
|
|
+ <div class="egt_item adfacjb" v-for="(item,index) in companyList" :key="index" @click="handleSelectCompany(item.name,item.id)">
|
|
|
+ <div class="ei_l adfac">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ <span>{{ item.num }}人</span>
|
|
|
+ </div>
|
|
|
+ <div class="ei_r" @click="handleChooseUser(item)">
|
|
|
+ <span>成员</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="ecl_company">
|
|
|
+ <i class="el-icon-arrow-left" @click="handleUserBack"></i>
|
|
|
+ {{ companyName }}
|
|
|
+ </div>
|
|
|
+ <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" style="margin-top: 33px;">全选</el-checkbox>
|
|
|
+ <div class="ecl_cbs">
|
|
|
+ <el-checkbox v-model="user.checked" v-for="(user,index) in userList" :key="index" @change="handleChangeUser" style="margin-top: 24px;display: block;">{{ user.name }}</el-checkbox>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="ec_r">
|
|
|
+ <div class="ecr_text">已选择（{{ selectedUsers.length }}/<span>{{ userList.length }}</span>）</div>
|
|
|
+ <div class="ecr_names">
|
|
|
+ <div class="en_pre adfacjc" v-for="(item,index) in selectedUsers" :key="index">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ <img src="@/assets/images/agent/delete_mini.png" @click="handleDeleteUser(item,index)">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="demo-drawer__footer" style="display: flex;justify-content: end;margin-top: 20px;">
|
|
|
+ <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 认</el-button>
|
|
|
+ <el-button @click="cancel" style="margin-right: 5%;">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -14,9 +100,93 @@
|
|
|
import { ref, getCurrentInstance } from 'vue'
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
|
|
+ const params = ref({
|
|
|
+ persons:[{name:'张三'},{name:'李四'}],
|
|
|
+ times:1,
|
|
|
+ startTime:'',
|
|
|
+ endTime:''
|
|
|
+ })
|
|
|
+ const userShow = ref(false)
|
|
|
+ const checkShow = ref(false)
|
|
|
+ const companyName = ref('')
|
|
|
+ const userName = ref('')
|
|
|
+ const companyList = ref([
|
|
|
+ {id:1,name:'合肥市传秀科技有限公司',num:5},
|
|
|
+ {id:2,name:'合肥市恰恰科技有限公司',num:20},
|
|
|
+ {id:3,name:'上海明国实业有限公司',num:17},
|
|
|
+ {id:4,name:'上特斯拉上海有限公司',num:37}
|
|
|
+ ])
|
|
|
+
|
|
|
+ const userList = ref([
|
|
|
+ {id:1,name:'张三',checked:false},
|
|
|
+ {id:2,name:'李四',checked:false},
|
|
|
+ {id:3,name:'王五',checked:false},
|
|
|
+ {id:4,name:'赵六',checked:false},
|
|
|
+ {id:5,name:'田七',checked:false}
|
|
|
+ ])
|
|
|
+ const selectedUsers = ref([])
|
|
|
+ const checkAll = ref(false)
|
|
|
+ const isIndeterminate = ref(false)
|
|
|
+ const buttonLoading = ref(false)
|
|
|
+
|
|
|
+ const handleAddUser = () => {
|
|
|
+ userShow.value = true
|
|
|
+ }
|
|
|
+
|
|
|
const handleBack = () => {
|
|
|
proxy.$router.go(-1)
|
|
|
}
|
|
|
+
|
|
|
+ const handleRemoveUser = (item,index) => {
|
|
|
+ params.value.persons.splice(index,1)
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleConfirm = () => {
|
|
|
+ if(params.value.persons.length === 0) return proxy.$message({type:'warning',message:'请选择项目成员'});
|
|
|
+ if(!params.value.startTime || !params.value.endTime) return proxy.$message({type:'warning',message:'请设置问卷作答时间'});
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleChooseUser = (item) => {
|
|
|
+ checkShow.value = true
|
|
|
+ companyName.value = item.name
|
|
|
+ }
|
|
|
+ const handleUserBack = () => {
|
|
|
+ checkShow.value = false
|
|
|
+ companyName.value = ''
|
|
|
+ }
|
|
|
+
|
|
|
+ const submitForm = () => {
|
|
|
+ userShow.value = false;
|
|
|
+ }
|
|
|
+ const cancel = () => {
|
|
|
+ userShow.value = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleCheckAllChange = (val) => {
|
|
|
+ selectedUsers.value = val ? JSON.parse(JSON.stringify(userList.value)) : [];
|
|
|
+ isIndeterminate.value = false;
|
|
|
+ userList.value.forEach(item => item.checked = val)
|
|
|
+ }
|
|
|
+ const handleChangeUser = () => {
|
|
|
+ let trues = userList.value.filter(item => item.checked).length;
|
|
|
+ if(trues>0&&trues<userList.value.length) isIndeterminate.value = true;
|
|
|
+ else isIndeterminate.value = false;
|
|
|
+ if(trues===userList.value.length) checkAll.value = true;
|
|
|
+ else checkAll.value = false;
|
|
|
+
|
|
|
+ selectedUsers.value = userList.value.filter(item => item.checked);
|
|
|
+ }
|
|
|
+ const handleDeleteUser = (item,index) => {
|
|
|
+ let i = userList.value.findIndex(c => c.id === item.id);
|
|
|
+ if(i>-1) userList.value[i].checked = false;
|
|
|
+ selectedUsers.value.splice(index,1);
|
|
|
+
|
|
|
+ let trues = userList.value.filter(item => item.checked).length;
|
|
|
+ if(trues>0&&trues<userList.value.length) isIndeterminate.value = true;
|
|
|
+ else isIndeterminate.value = false;
|
|
|
+ if(trues===userList.value.length) checkAll.value = true;
|
|
|
+ else checkAll.value = false;
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
@@ -50,5 +220,251 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .content{
|
|
|
+ width: calc(100% - 720px);
|
|
|
+ height: calc(100vh - 88px);
|
|
|
+ margin: 12px 360px;
|
|
|
+ overflow-y: auto;
|
|
|
+ .c_top{
|
|
|
+ width: 100%;
|
|
|
+ padding: 12px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 6px;
|
|
|
+ span{
|
|
|
+ font-family: PingFang-SC, PingFang-SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #252525;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .c_set{
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 152px);
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin-top: 8px;
|
|
|
+ padding: 28px 21px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .cs_title{
|
|
|
+ font-family: PingFang-SC, PingFang-SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #252525;
|
|
|
+ line-height: 20px;
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+ .cs_users{
|
|
|
+ width: 100%;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 6px;
|
|
|
+ border: 1px solid #E5E7EB;
|
|
|
+ margin-top: 20px;
|
|
|
+ padding: 7px 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .cu_l{
|
|
|
+ width: 104px;
|
|
|
+ padding-right: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ &>img{
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ margin-top: -5px;
|
|
|
+ }
|
|
|
+ .cul_add{
|
|
|
+ width: 54px;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #761E6A;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #761E6A;
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: -2px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cu_r{
|
|
|
+ width: calc(100% - 104px);
|
|
|
+ margin-left: -16px;
|
|
|
+ .cr_item{
|
|
|
+ padding: 4px 10px;
|
|
|
+ background: #F9FAFB;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin-left: 16px;
|
|
|
+ span{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #252525;
|
|
|
+ line-height: 14px;
|
|
|
+ }
|
|
|
+ img{
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-left: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cs_zd{
|
|
|
+ margin-top: 12px;
|
|
|
+ span{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #6B7280;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cs_time{
|
|
|
+ margin-top: 6px;
|
|
|
+ .ct_pre{
|
|
|
+ margin-top: 30px;
|
|
|
+ span{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #6B7280;
|
|
|
+ line-height: 20px;
|
|
|
+ margin-right: 23px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cs_btn{
|
|
|
+ margin-top: 70px;
|
|
|
+ padding-left: 79px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ed_coach{
|
|
|
+ margin-top: -20px;
|
|
|
+ .ec_l{
|
|
|
+ width: calc(50% - 1px);
|
|
|
+ height: 100%;
|
|
|
+ padding-right: 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-right: 1px solid #ECEEF5;
|
|
|
+
|
|
|
+ .ecl_gs{
|
|
|
+ margin-top: 19px;
|
|
|
+ .eg_title{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #6B7280;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ .egt_item{
|
|
|
+ margin-top: 24px;
|
|
|
+ .ei_l{
|
|
|
+ span{
|
|
|
+ font-family: PingFang-SC, PingFang-SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #252525;
|
|
|
+ line-height: 20px;
|
|
|
+ &:last-child{
|
|
|
+ font-weight: 400;
|
|
|
+ color: #6B7280;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ei_r{
|
|
|
+ span{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #761E6A;
|
|
|
+ line-height: 20px;
|
|
|
+ position: relative;
|
|
|
+ padding-left: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ &::before{
|
|
|
+ content: '';
|
|
|
+ width: 1px;
|
|
|
+ height: 16px;
|
|
|
+ background: #DDE0E6;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 50%;
|
|
|
+ margin-top: -8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ecl_company{
|
|
|
+ margin-top: 19px;
|
|
|
+ position: relative;
|
|
|
+ font-family: PingFang-SC, PingFang-SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #252525;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: center;
|
|
|
+ i{
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #252525;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ecl_cbs{
|
|
|
+ width: 100%;
|
|
|
+ // height: calc(100% - 143px);
|
|
|
+ max-height: 376px;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ec_r{
|
|
|
+ width: 50%;
|
|
|
+ padding-left: 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .ecr_text{
|
|
|
+ font-family: PingFang-SC, PingFang-SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #252525;
|
|
|
+ line-height: 22px;
|
|
|
+ span{
|
|
|
+ color: #B9B9B9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ecr_names{
|
|
|
+ margin-left: -16px;
|
|
|
+ overflow: hidden;
|
|
|
+ .en_pre{
|
|
|
+ float: left;
|
|
|
+ padding: 10px;
|
|
|
+ background: #F9FAFB;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin: 19px 0 0 16px;
|
|
|
+ span{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #252525;
|
|
|
+ line-height: 14px;
|
|
|
+ }
|
|
|
+ img{
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-left: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
