前端工作小结59-表单重置项目处理

简介: 前端工作小结59-表单重置项目处理
<template>
  <!--新建账号对话框-->
  <el-dialog title="新建账号" :visible.sync="dialogFormVisible" @close="close">
    <el-form ref="form" :model="form" size="medium" :label-width="formLabelWidth">
      <el-form-item prop="name" label="账号名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
       <!-- <el-button @click="resetLoginFrom">重置</el-button>-->
      </el-form-item>
      <el-form-item  label="所属平台" :label-width="formLabelWidth">
        <el-input v-model="form.platform" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="内容类型" :label-width="formLabelWidth">
        <el-input v-model="form.content_type" autocomplete="off"></el-input>
        <!--<el-select v-model="form.content_type"  placeholder="请选择内容类型">
          <el-option v-for="item in content_type" :label="item.text" :value="item.value"></el-option>
        </el-select>-->
      </el-form-item>
      <el-form-item label="所属部门" :label-width="formLabelWidth">
        <select-form @change="DepartmentList"  v-model="form.department_id" />
      </el-form-item>
      <el-form-item prop="business_module" label="所属栏目" :label-width="formLabelWidth">
        <!--注意用户的返回值-->
        <el-select v-model="form.business_module"  placeholder="请选择所属栏目" multiple>
          <el-option @click="resetLoginFrom" v-for="label in business_module" :label="label" :value="label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="column" label="所属单元" :label-width="formLabelWidth">
        <!--注意用户的返回值-->
        <el-select @click="resetLoginFrom" v-model="form.column"  placeholder="请选择所属栏目" multiple>
          <el-option  v-for="label in column" :label="label" :value="label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布类型" :label-width="formLabelWidth">
        <el-select v-model="form.resource_type" placeholder="请选择发布类型">
          <el-option label="头条" value="1"></el-option>
          <el-option label="次头条" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="刊例价" :label-width="formLabelWidth">
        <el-input v-model="form.price" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { AddEditDialogMixin } from "@/component/dialog/AddEditDialogMixin";
import SelectForm from "@/component/select/SelectFrom";
import {getAction} from "@/api";
export default {
  //注册组件
  components: { SelectForm},
  name: "create",
  mixins: [AddEditDialogMixin],
  data() {
    return {
      formLabelWidth: "140px",
      url: {
        add: "/account",
        edit: "/account",
        query: "/account"
      },
      business_module:[],
      column: []
    };
  },
 /* created() {
    this.list();
 /!*   this.account_content_type();*!/
  },*/
  computed: {
    fullTitle() {
      return this.title + "账号";
    }
  },
  methods: {
    /*封装网络请求 该数据为所属单元和所属项目*/
    DepartmentList(val) {
      this.resetLoginFrom()
    /*  this.$refs.form.resetFields()*/
        getAction("/department/attribute/"+val).then(res => {
          //回显数据
            this.business_module=res.data.business_module;
            this.column=res.data.column;
      });
    },
    resetLoginFrom(){
      this.$refs.form.resetFields()
    }
   /* account_content_type(){
      getAction('/dict/list', {dict_code: 'content_type'}).then(res => {
        this.content_type = res.data
      })
    }*/
  }
};
</script>
<style></style>
相关文章
|
4月前
|
前端开发 JavaScript 定位技术
一、前端高德地图注册、项目中引入、渲染标记(Marker)and覆盖物(Circle)
文章介绍了如何在前端项目中注册并使用高德地图API,包括注册高德开放平台账号、引入高德地图到项目、以及如何在地图上渲染标记(Marker)和覆盖物(Circle)。
117 1
|
2月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
177 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
3月前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
171 3
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
2月前
|
前端开发 测试技术
前端工程化的分支策略要如何与项目的具体情况相结合?
前端工程化的分支策略要紧密结合项目的实际情况,以实现高效的开发、稳定的版本控制和顺利的发布流程。
30 1
|
2月前
|
前端开发 Unix 测试技术
揭秘!前端大牛们如何高效管理项目,确保按时交付高质量作品!
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题,帮助你学习前端大牛们的项目管理技巧,确保按时交付高质量的作品。
45 2
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
前端技术分享:使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享:使用Vue.js构建响应式表单
|
4月前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
3月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
904 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
3月前
|
缓存 前端开发 JavaScript
前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
|
3月前
|
前端开发 JavaScript 开发工具
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
47 0