普查列表页面

liyanqi

2022-11-01 e5b58707bae2d4e153560f51ed38859c530e9a66

 src/views/operate/rectification/surveyList/components/viewInterface/index.vue

@@ -2,51 +2,70 @@
    <div class="createmyInterface">
        <main>
            <div class="mainContent">
                <el-form ref="user" label-width="140px" autoComplete="on" :model="myInterface"
                    :rules="createmyInterfaceRules" label-position="right">
                    <!-- 应用名称 -->
                    <el-form-item label="应用名称:" prop="applicationName">
                        <el-input v-model="myInterface.applicationName" placeholder="填写应用名称"></el-input>
        <el-form
          ref="user"
          label-width="140px"
          autoComplete="on"
          :model="myInterface"
          :rules="createUserRules"
          label-position="right"
        >
          <el-form-item class="optionItem" label="任务编号:" prop="num">
            <el-input
              v-model="myInterface.num"
              placeholder="请填写任务编号"
              disabled
            ></el-input>
                    </el-form-item>
                    <!-- 应用图标 -->
                    <el-form-item label="应用图标:" prop="applicationIconUrl">
                        <div class="iconBox">
                            <div class="upload">
                                <img src="@/assets/imgs/user/default-avatar.jpg" alt="">
                            </div>
                            <div class="iconView">
                                <span>示意图</span>
                                <img src="@/assets/imgs/user/default-avatar.jpg" alt="">
                            </div>
                            <div class="tip">
                                <span>只允许上传jpg,jpeg,png,svg格式的图片，建议尺寸为105px*105px</span>
                            </div>
                        </div>
          <el-form-item class="optionItem" label="问题类型:" prop="type">
            <el-input
              v-model="myInterface.type"
              placeholder="请选择问题类型"
              disabled
            ></el-input>
                    </el-form-item>
                    <!-- 应用类型 -->
                    <el-form-item label="应用类型:" prop="applicationType">
                        <div class="optionItem">
                            <el-radio-group v-model="myInterface.applicationType">
                                <el-radio :label="1">网页应用</el-radio>
                            </el-radio-group>
                        </div>
          <el-form-item class="optionItem" label="大类:" prop="bigclass">
            <el-input
              v-model="myInterface.bigclass"
              placeholder="请选择大类"
              disabled
            ></el-input>
                    </el-form-item>
                    <!--网站url  -->
                    <el-form-item label="网站url:" prop="websiteUrl">
                        <el-input v-model="myInterface.websiteUrl"></el-input>
          <el-form-item class="optionItem" label="小类:" prop="subclass">
            <el-input
              v-model="myInterface.subclass"
              placeholder="请选择小类"
              disabled
            ></el-input>
                    </el-form-item>
                    <!-- 应用描述 -->
                    <el-form-item label="应用描述:" prop="description">
                        <el-input v-model="myInterface.description" placeholder="请填写描述"></el-input>
          <el-form-item class="optionItem" label="街道:" prop="street">
            <el-input
              v-model="myInterface.street"
              placeholder="请填写街道"
              disabled
            ></el-input>
                    </el-form-item>
                    <!-- 按钮 -->
                    <!-- <el-form-item>
                        <div class="optionBtn">
                            <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">提交
                            </el-button>
                            <el-button class="btn reset">重置</el-button>
                        </div>
                    </el-form-item> -->
          <el-form-item class="optionItem" label="社区:" prop="community">
            <el-input
              v-model="myInterface.community"
              placeholder="请填写社区"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item class="optionItem" label="任务描述:" prop="task">
            <el-input
              v-model="myInterface.task"
              placeholder="请填写任务描述"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item class="optionItem" label="上报时间:" prop="reportTime">
            <el-input
              v-model="myInterface.reportTime"
              placeholder="请选择上报时间"
              disabled
            ></el-input>
          </el-form-item>
                </el-form>
            </div>
        </main>
@@ -66,7 +85,9 @@
            } else {
                const rep = /^\w+$/;
                if (!rep.test(value)) {
                    callback(new Error("密码只能是以数字、26个英文字母或者下划线组成的字符串"));
          callback(
            new Error("密码只能是以数字、26个英文字母或者下划线组成的字符串")
          );
                }
            }
        };
@@ -84,43 +105,49 @@
            if (!value) {
                callback(new Error("请填写手机号码"));
            } else {
                const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/
        const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/;
                if (!rep.test(value)) {
                    callback("请输入正确的手机号码");
                }
            }
        };
        return {
            myInterface: {
            },
      myInterface: {},
            createmyInterfaceRules: {
                applicationName: [
                    { required: true, trigger: "blur", validator: validateApplicationName},
          {
            required: true,
            trigger: "blur",
            validator: validateApplicationName,
          },
                ],
                applicationIconUrl: [
                    { required: true, trigger: "blur", validator: validateApplicationIconUrl },
          {
            required: true,
            trigger: "blur",
            validator: validateApplicationIconUrl,
          },
                ],
                applicationType: [
                    { required: true, trigger: "blur", validator: validateApplicationType },
                ],
                websiteUrl: [
                    { required: true, trigger: "blur" },
                ],
                description: [
                    { required: false, trigger: "blur" },
                ],
          {
            required: true,
            trigger: "blur",
            validator: validateApplicationType,
            },
        }
        ],
        websiteUrl: [{ required: true, trigger: "blur" }],
        description: [{ required: false, trigger: "blur" }],
      },
    };
    },
    created() {
        const that = this;
        const {userInfo} = this;
        this.myInterface = JSON.parse(JSON.stringify(userInfo));
    },
    methods: {
    },
    props: ['updateFlag','userInfo']
}
  methods: {},
  props: ["updateFlag", "userInfo"],
};
</script>
<style lang="scss" scoped>
.createmyInterface {
@@ -230,7 +257,6 @@
                    flex: 2;
                }
            }

        }
    }