|
@@ -0,0 +1,389 @@
|
|
|
+<template>
|
|
|
+ <div class="PubTagGroupWrapper">
|
|
|
+ <el-form
|
|
|
+ class="groups"
|
|
|
+ :rules="rules"
|
|
|
+ ref="groups"
|
|
|
+ :model="form"
|
|
|
+ label-width="150px"
|
|
|
+ >
|
|
|
+ <el-form-item
|
|
|
+ label="选择归属:"
|
|
|
+ prop="region1"
|
|
|
+ >
|
|
|
+ <span class="changeTips">改变归属后,标签明细将会恢复到默认状态</span>
|
|
|
+ <el-select
|
|
|
+ v-model="form.region1"
|
|
|
+ placeholder="请选择归属"
|
|
|
+ :disabled="!!editData.id"
|
|
|
+ @change="(e)=>readyChangeSelect(e,1)"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in Adscriptions"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.val"
|
|
|
+ :key="item.id"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="选择填写单类型:"
|
|
|
+ prop="region2"
|
|
|
+ >
|
|
|
+ <span class="changeTips">改变类型后,标签明细将会恢复到默认状态</span>
|
|
|
+ <el-select
|
|
|
+ v-model="form.region2"
|
|
|
+ placeholder="请选择填写单类型"
|
|
|
+ :disabled="!!editData.id"
|
|
|
+ @change="(e)=>readyChangeSelect(e,2)"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in labelTypes"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.val"
|
|
|
+ :key="item.id"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="标签系统名称:"
|
|
|
+ prop="region3"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="form.region3"
|
|
|
+ maxLength="30"
|
|
|
+ placeholder="请输入标签系统名称"
|
|
|
+ @change="sendData"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="标签界面名称:"
|
|
|
+ prop="region4"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="form.region4"
|
|
|
+ maxLength="30"
|
|
|
+ placeholder="请输入标签界面名称"
|
|
|
+ @change="sendData"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="标签前后缀:"
|
|
|
+ class="fix-inp"
|
|
|
+ prop="region12"
|
|
|
+ v-if="form.region2==6"
|
|
|
+ >
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-input v-model="form.prefix"
|
|
|
+ maxLength="30"
|
|
|
+ placeholder="前缀"
|
|
|
+ @change="sendData"
|
|
|
+ ></el-input></el-col>
|
|
|
+ <el-col :span="4">标签</el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-input
|
|
|
+ v-model="form.suffix"
|
|
|
+ maxLength="30"
|
|
|
+ placeholder="后缀"
|
|
|
+ @change="sendData"
|
|
|
+ ></el-input></el-col>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="选择项之间链接:"
|
|
|
+ prop="region5"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="form.region5"
|
|
|
+ maxLength="30"
|
|
|
+ placeholder="请输入选择项之间链接"
|
|
|
+ @change="sendData"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="能否当项目检索:"
|
|
|
+ prop="region6"
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ v-model="form.region6"
|
|
|
+ @change="sendData"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ label="不可以"
|
|
|
+ value="1"
|
|
|
+ ></el-option>
|
|
|
+ <el-option
|
|
|
+ label="可以"
|
|
|
+ value="0"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="性别:"
|
|
|
+ prop="region7"
|
|
|
+ >
|
|
|
+ <span class="changeTips">改变性别后,标签明细将会恢复到默认状态</span>
|
|
|
+ <el-select
|
|
|
+ v-model="form.region7"
|
|
|
+ :disabled="!!editData.id"
|
|
|
+ @change="(e)=>readyChangeSelect(e,3)"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ label="通用"
|
|
|
+ value="3"
|
|
|
+ ></el-option>
|
|
|
+ <el-option
|
|
|
+ label="男"
|
|
|
+ value="1"
|
|
|
+ ></el-option>
|
|
|
+ <el-option
|
|
|
+ label="女"
|
|
|
+ value="2"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="年龄:"
|
|
|
+ prop="region8"
|
|
|
+ class="ages"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model.number="form.region8"
|
|
|
+ ref="valage1"
|
|
|
+ @input="sendData"
|
|
|
+ ></el-input> ~
|
|
|
+ <el-input
|
|
|
+ v-model.number="form.region9"
|
|
|
+ ref="valage2"
|
|
|
+ @input="sendData"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import api from '@api/icss.js';
|
|
|
+ import utils from '@api/utils.js';
|
|
|
+ /**
|
|
|
+ * titlePar 顶部显示左(有默认值可不填)
|
|
|
+ * titleSub 顶部显示右(有默认值可不填)
|
|
|
+ * form 当前页面传到父组件的数据(region10,region11暂时不用)
|
|
|
+ * submitForm 基本信息验证必填项
|
|
|
+ * validatePass 基本信息必填项验证成功回调
|
|
|
+ * 父组件根据form.region2改变底部组件操作项
|
|
|
+ * searchTagList 函数的参数根据type变化
|
|
|
+ */
|
|
|
+
|
|
|
+ export default {
|
|
|
+ props:['editData'],
|
|
|
+ data() {
|
|
|
+ var validatePass2 = (rule, value, callback) => {
|
|
|
+ this.validateSystomName(value,callback)
|
|
|
+ };
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ region1: '', //归属
|
|
|
+ region2: '', //填写单类型
|
|
|
+ region3: '', //系统名称
|
|
|
+ region4: '', //界面名称
|
|
|
+ region5: '', //选项之间的链接
|
|
|
+ region6: '1', //是否可以检索
|
|
|
+ region7: '3', //性别
|
|
|
+ region8: '0', //最小年龄
|
|
|
+ region9: '200', //最大年龄
|
|
|
+ region12:'',
|
|
|
+ prefix:'', //前缀
|
|
|
+ suffix:'', //后缀
|
|
|
+ tipLis:[], //提示列表
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ region1: [
|
|
|
+ { required: true, message: '请选择归属', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ region2: [
|
|
|
+ { required: true, message: '请选择填写单类型', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ region3: [
|
|
|
+ { required: true, message: '请输入标签系统名称', trigger: 'change' },
|
|
|
+ { validator: validatePass2, trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ region4: [
|
|
|
+ { required: true, message: '请输入标签界面名称', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ region6: [
|
|
|
+ { required: true, message: '请输入能否当项目检索', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ region7: [
|
|
|
+ { required: true, message: '请选择性别', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ region8: [
|
|
|
+ { required: true, message: '请输入最小年龄', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ region9: [
|
|
|
+ { required: true, message: '请输入最大年龄', trigger: 'change' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ tmpSex: '通用',
|
|
|
+ tmpOwn: '',
|
|
|
+ tmpType: '',
|
|
|
+ Adscriptions: [],
|
|
|
+ labelTypes: [],
|
|
|
+ labelTypesList: [],
|
|
|
+ type:'',
|
|
|
+ systom:null, //标签系统名称存在与否
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ newSex() {
|
|
|
+ return this.form.region7;
|
|
|
+ },
|
|
|
+ newType() {
|
|
|
+ return this.form.region1;
|
|
|
+ },
|
|
|
+ newSign() {
|
|
|
+ return this.form.region2;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ //编辑时赋值
|
|
|
+ const editData = this.$props.editData;
|
|
|
+ if(editData.id){
|
|
|
+ const trans = utils.transformKeys(editData);
|
|
|
+ this.form = Object.assign({},this.form,trans);
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$emit('submitForm', 'groups', false);
|
|
|
+ this.getDropList();
|
|
|
+ this.$emit('changeVal', this.form, false);
|
|
|
+
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ newSex(nextVal, prevVal) {
|
|
|
+ this.tmpSex = prevVal;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getDropList() {
|
|
|
+ return api.getDropList().then((res) => {
|
|
|
+ if (res.data.code === '0') {
|
|
|
+ this.Adscriptions = res.data.data[1];
|
|
|
+ this.labelTypes = res.data.data[6];
|
|
|
+ this.form.tipLis = res.data.data[6];
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ validateSystomName(name,callback) {
|
|
|
+ if(this.form.region3.trim() == ''){ return }
|
|
|
+ let param = {
|
|
|
+ "existName": this.form.region3,
|
|
|
+ "type": this.form.region1,
|
|
|
+ "notIds":[this.$props.editData.id]
|
|
|
+ };
|
|
|
+ api.validateSystomName(param).then((res) => {
|
|
|
+ if (res.data.code === '0') {
|
|
|
+ if(res.data.data && res.data.data.length != 0){
|
|
|
+ callback(new Error('该系统名称已存在'));
|
|
|
+ }else{
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ sendData() {
|
|
|
+ this.$emit('changeVal', this.form, false)
|
|
|
+ },
|
|
|
+ changeType(type){
|
|
|
+ this.$emit('changeVal', this.form, false);
|
|
|
+ this.$emit('changeType', type, false)
|
|
|
+ },
|
|
|
+ changeSex(data) { //改变性别清空数据
|
|
|
+ this.$emit('changeVal', this.form, false);
|
|
|
+ this.$emit('changeSex', data, false);
|
|
|
+ },
|
|
|
+ readyChangeSelect(tmpData,type) {
|
|
|
+ //console.log(tmpData)
|
|
|
+ this.changeSex(tmpData);
|
|
|
+ },
|
|
|
+ submitForm(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.$emit('validatePass', this.form, false)
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ warning(msg, type) {
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message: msg,
|
|
|
+ type: type || 'warning'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="less">
|
|
|
+ .fix-inp .el-col .el-input__inner{
|
|
|
+ width: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .fix-inp .el-col-4{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .groups {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 20px;
|
|
|
+ margin: 20px 20px -20px 20px;
|
|
|
+ .el-form-item__content,
|
|
|
+ .el-input__inner {
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .el-form-item__error {
|
|
|
+ top: 28px;
|
|
|
+ }
|
|
|
+ .el-form-item__label {
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .el-input__icon {
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ .ages .el-input {
|
|
|
+ display: inline-block;
|
|
|
+ width: auto;
|
|
|
+ .el-input__inner {
|
|
|
+ width: 40px;
|
|
|
+ padding: 0 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__inner::-webkit-outer-spin-button,
|
|
|
+ .el-input__inner::-webkit-inner-spin-button {
|
|
|
+ -webkit-appearance: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__inner[type="number"] {
|
|
|
+ -moz-appearance: textfield;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-message-box__btns .el-button--default {
|
|
|
+ color: #606266 !important;
|
|
|
+ }
|
|
|
+ .cancelColor {
|
|
|
+ color: #22ccc8 !important;
|
|
|
+ }
|
|
|
+ .changeTips {
|
|
|
+ position: absolute;
|
|
|
+ left: 220px;
|
|
|
+ min-width: 300px;
|
|
|
+ color: #ea7777;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|