配置pc端模版

• 编辑页
• 列表页
• 统计页
• 弹窗
• 抽屉

1、 打开vscode
2、

• mac 电脑 按下 shift + command + p
• window电脑 按下 shift + ctrl + p

3、 在输入框 搜索 代码片段 再选择 首选项:配置用户代码片段
4、 选择 新建全局代码片段
5、 输入代码片段储存文件名称 pc-vue-tpl 按回车确定。
6、 把以下内容复制到文件 （下面代码区域右上角，点击按钮可快捷复制）

::: demo

{
  "pc-vue-edit": {
    "prefix": "<template",
    "body": [
      "<template>",
      "  <div>",
      "    <!-- -->",
      "    $2",
      "  </div>",
      "</template>",
      "<script>",
      "export default {",
      "  data() {",
      "    return {",
      "      formData: {}",
      "    };",
      "  },",
      "}",
      "</script>",
    ],
    "description": "vue的pc端编辑页模版"
  },
  "pc-vue-dialog": {
    "prefix": "<template",
    "body": [
      "<template>",
      "  <div v-loading=\"isLoading\" element-loading-text=\"加载中\" element-loading-spinner=\"el-icon-loading\" style=\"height: 100%\">",
      "    <div style=\"width: 100%;height: calc(100% - 40px);min-height:300px;\">",
      "      <el-scrollbar style=\"height: 100%;\">",
      "      ...弹窗内容",
      "    $2",
      "      </el-scrollbar>",
      "    </div>",
      "    <div style=\"padding: 10px 20px 0 0; text-align: right; box-sizing: border-box\">",
      "      <cv-btn-base @click=\"handleClose\">取 消</cv-btn-base>",
      "      <cv-btn-base type=\"primary\" @click=\"handleConfirm\" autoLoading>确 定</cv-btn-base>",
      "    </div>",
      "  </div>",
      "</template>",
      " ",
      "<script>",
      "export default {",
      "  props: {",
      "    id: {",
      "      type: [String, Number],",
      "      default: 0",
      "    }",
      "  },",
      "  data() {",
      "    return {",
      "      isLoading: true,",
      "      formRules: {},",
      "      formPostDef: {},",
      "      formData: {}",
      "    };",
      "  },",
      "  created() {",
      "    this.initData();",
      "  },",
      "  methods: {",
      "    initData() {",
      "      // 这边模拟请求数据",
      "      if (this.id > 0) {",
      "        this.\\$request.flagGet('XXXXX_FLAG', this.id).then((getRR) => {",
      "          this.formData = getRR.data || {};",
      "          this.isLoading = false;",
      "        });",
      "      } else {",
      "        this.isLoading = false;",
      "      }",
      "    },",
      "    // 保存前校验",
      "    handleConfirm(callClose) {",
      "      this.\\$refs['refFormBase'].validate((valid) => {",
      "        if (!valid) {",
      "          callClose();",
      "          return false;",
      "        }",
      "        if (this.formData?.business_id != null) {",
      "          // 获取只改变的字段",
      "          this.\\$request",
      "            .flagPut('XXXXX_FLAG', this.formData?.business_id, {",
      "              ...(this.formPostDef || {}), //默认要提交的数据",
      "              ...this.formData // 表单数据",
      "            })",
      "            .then((succRes) => {",
      "              this.\\$message.success('更新成功');",
      "              this.\\$emit('handleCallback');",
      "              this.\\$emit('close');",
      "            })",
      "            .catch((error) => {",
      "              callClose();",
      "            });",
      "        } else {",
      "          this.\\$request",
      "            .flagPost('XXXXX_FLAG', {",
      "              ...(this.formPostDef || {}), //默认要提交的数据",
      "              ...this.formData // 表单数据",
      "            })",
      "            .then((succRes) => {",
      "              this.\\$message.success('添加成功');",
      "              this.\\$emit('handleCallback');",
      "              this.\\$emit('close');",
      "            })",
      "            .catch((error) => {",
      "              callClose();",
      "            });",
      "        }",
      "      });",
      "    },",
      "    handleClose() {",
      "      this.\\$emit('close');",
      "    },",
      "  },",
      "}",
      "</script>",
    ],
    "description": "vue的pc端弹窗子体模版"
  },
  "pc-vue-drawer": {
    "prefix": "<template",
    "body": [
      "<template>",
      "  <div v-loading=\"isLoading\" element-loading-text=\"加载中\" element-loading-spinner=\"el-icon-loading\" style=\"height: 100%\">",
      "    <div style=\"width: 100%;height: calc(100% - 40px);\">",
      "      <el-scrollbar style=\"height: 100%;\">",
      "      ...弹窗内容",
      "    $2",
      "      </el-scrollbar>",
      "    </div>",
      "    <div style=\"padding: 10px 20px 0 0; text-align: right; box-sizing: border-box\">",
      "      <cv-btn-base @click=\"handleClose\">取 消</cv-btn-base>",
      "      <cv-btn-base type=\"primary\" @click=\"handleConfirm\" autoLoading>确 定</cv-btn-base>",
      "    </div>",
      "  </div>",
      "</template>",
      " ",
      "<script>",
      "export default {",
      "  props: {",
      "    id: {",
      "      type: [String, Number],",
      "      default: 0",
      "    }",
      "  },",
      "  data() {",
      "    return {",
      "      isLoading: true,",
      "      formRules: {},",
      "      formData: {}",
      "    };",
      "  },",
      "  created() {",
      "    this.initData();",
      "  },",
      "  methods: {",
      "    initData() {",
      "      // 这边模拟请求数据",
      "      if (this.id > 0) {",
      "        this.\\$request.flagGet('XXXXX_FLAG', this.id).then((getRR) => {",
      "          this.formData = getRR.data || {};",
      "          this.isLoading = false;",
      "        });",
      "      } else {",
      "        this.isLoading = false;",
      "      }",
      "    },",
      "    // 保存前校验",
      "    handleConfirm(callClose) {",
      "      this.\\$refs['refFormBase'].validate((valid) => {",
      "        if (!valid) {",
      "          callClose();",
      "          return false;",
      "        }",
      "        if (this.formData?.business_id != null) {",
      "          // 获取只改变的字段",
      "          this.\\$request",
      "            .flagPut('XXXXX_FLAG', this.formData?.business_id, {",
      "              ...(this.formPostDef || {}), //默认要提交的数据",
      "              ...this.formData // 表单数据",
      "            })",
      "            .then((succRes) => {",
      "              this.\\$message.success('更新成功');",
      "              this.\\$emit('handleCallback');",
      "              this.\\$emit('close');",
      "            })",
      "            .catch((error) => {",
      "              callClose();",
      "            });",
      "        } else {",
      "          this.\\$request",
      "            .flagPost('XXXXX_FLAG', {",
      "              ...(this.formPostDef || {}), //默认要提交的数据",
      "              ...this.formData // 表单数据",
      "            })",
      "            .then((succRes) => {",
      "              this.\\$message.success('添加成功');",
      "              this.\\$emit('handleCallback');",
      "              this.\\$emit('close');",
      "            })",
      "            .catch((error) => {",
      "              callClose();",
      "            });",
      "        }",
      "      });",
      "    },",
      "    handleClose() {",
      "      this.\\$emit('close');",
      "    },",
      "  },",
      "}",
      "</script>",
    ],
    "description": "vue的pc端弹窗子体模版"
  }
}

:::