clearticket_sales/.vscode/project.code-snippets

{
  "vueinit": {
    "prefix": "vueinit",
    "body": [
      "<template>",
      "  <div> </div>",
      "</template>",
      "",
      "<script setup></script>",
      "",
      "<style lang=\"\"></style>"
    ],
    "description": "vueinit"
  },
  "List page": {
    "prefix": "lp",
    "body": [
      "<template>",
      "  <div class=\"p-10\">",
      "    <a-card :title=\"route.meta.title\">",
      "      <template #extra>",
      "        <a-button type=\"primary\" @click=\"eidtModal.show()\">",
      "          <template #icon> <icon-plus /> </template>创建",
      "        </a-button>",
      "      </template>",
      "",
      "      <div class=\"pb-10\">",
      "        <a-form layout=\"inline\" :model=\"searchParam\">",
      "          <a-form-item",
      "            field=\"name\"",
      "            label=\"名称\"",
      "            validate-trigger=\"blur\"",
      "            :rules=\"[]\"",
      "          >",
      "            <a-input v-model=\"searchParam.name\" />",
      "          </a-form-item>",
      "",
      "          <a-form-item>",
      "            <a-space>",
      "              <a-button type=\"primary\" @click=\"search\">查询</a-button>",
      "              <a-button @click=\"reset\">重置</a-button>",
      "            </a-space>",
      "          </a-form-item>",
      "        </a-form>",
      "      </div>",
      "",
      "      <a-table",
      "        :loading=\"loading\"",
      "        :data=\"tableData\"",
      "        :pagination=\"pagination\"",
      "        @pageChange=\"handleCurrentChange\"",
      "        @pageSizeChange=\"handleSizeChange\"",
      "      >",
      "        <template #columns>",
      "          <a-table-column",
      "            v-for=\"(col, index) in columns\"",
      "            :key=\"index\"",
      "            v-bind=\"col\"",
      "          >",
      "            <template",
      "              #cell=\"{ record }\"",
      "              v-if=\"col.dataIndex.indexOf('Time') > -1\"",
      "            >",
      "              {{ dayjs(record[col.dataIndex]).format('YYYY-MM-DD HH:mm:ss') }}",
      "            </template>",
      "          </a-table-column>",
      "",
      "          <a-table-column",
      "            title=\"操作\"",
      "            data-index=\"actions\"",
      "            fixed=\"right\"",
      "            :width=\"200\"",
      "          >",
      "            <template #cell=\"{ record }\">",
      "              <a-space>",
      "                <a-button",
      "                  size=\"small\"",
      "                  type=\"outline\"",
      "                  @click=\"eidtModal.show(record)\"",
      "                >",
      "                  编辑",
      "                </a-button>",
      "",
      "                <a-button",
      "                  size=\"small\"",
      "                  type=\"outline\"",
      "                  status=\"danger\"",
      "                  @click=\"handleDelete(record.id)\"",
      "                >",
      "                  删除",
      "                </a-button>",
      "              </a-space>",
      "            </template>",
      "          </a-table-column>",
      "        </template>",
      "      </a-table>",
      "    </a-card>",
      "",
      "    <EidtModal ref=\"eidtModal\" @update=\"getTableList\"></EidtModal>",
      "  </div>",
      "</template>",
      "",
      "<script setup>",
      "  import { useTable } from '@/hooks/useTable';",
      "  import { meterialApi as api } from '@/api/material';",
      "",
      "  import EidtModal from './Modal.vue';",
      "  import { Modal } from '@arco-design/web-vue';",
      "  import dayjs from 'dayjs';",
      "",
      "  const route = useRoute();",
      "  const eidtModal = ref();",
      "",
      "  const initParam = reactive({",
      "    name: '',",
      "  });",
      "",
      "  const columns = [",
      "    { title: '名称', dataIndex: 'name', fixed: 'left' },",
      "    { title: '名称', dataIndex: 'name' },",
      "  ];",
      "",
      "  const {",
      "    loading,",
      "    tableData,",
      "    pagination,",
      "    searchParam,",
      "    search,",
      "    getTableList,",
      "    reset,",
      "    handleSizeChange,",
      "    handleCurrentChange,",
      "  } = useTable({",
      "    api: api.getList,",
      "    initParam,",
      "    showPage: true,",
      "  });",
      "",
      "  const handleDelete = (id) => {",
      "    Modal.confirm({",
      "      title: '提示',",
      "      content: `确定删除吗？`,",
      "      onOk: async () => {",
      "        await api.deleteItem(id);",
      "",
      "        getTableList();",
      "      },",
      "    });",
      "  };",
      "</script>",
      "",
      "<style lang=\"\"></style>"
    ],
    "description": "Modal page"
  },
  "Modal page": {
    "prefix": "mp",
    "body": [
      "<template>",
      "  <a-modal",
      "    :title=\"title\"",
      "    v-model:visible=\"visible\"",
      "    @cancel=\"hide\"",
      "    @before-ok=\"handleSubmit\"",
      "    unmount-on-close",
      "  >",
      "    <a-form",
      "      ref=\"formRef\"",
      "      auto-label-width",
      "      class=\"max-w-[80%] px-5 mx-auto\"",
      "      layout=\"horizontal\"",
      "      :model=\"form\"",
      "    >",
      "      <a-form-item",
      "        field=\"name\"",
      "        label=\"名称\"",
      "        :rules=\"[{ required: true, message: '请输入' }]\"",
      "      >",
      "        <a-input v-model=\"form.name\"></a-input>",
      "      </a-form-item>",
      "    </a-form>",
      "  </a-modal>",
      "</template>",
      "",
      "<script setup>",
      "  import useModal from '@/hooks/useModal';",
      "  import { api } from '@/api/${1}';",
      "",
      "  const emit = defineEmits(['update']);",
      "",
      "  const route = useRoute();",
      "  const title = computed(() => {",
      "    return (editType.value === 'add' ? '新增' : '编辑') + route.meta.title;",
      "  });",
      "",
      "  const { visible, editType, form, show, hide, formRef, handleSubmit } =",
      "    useModal({",
      "      emit,",
      "      add: api.addItem,",
      "      update: api.updateItem,",
      "      defaultForm: {",
      "        name: '',",
      "        seq: '',",
      "        description: '',",
      "      },",
      "    });",
      "",
      "  defineExpose({",
      "    show,",
      "  });",
      "</script>"
    ],
    "description": "Modal page"
  },
  "form-submit": {
    "prefix": "form-submit",
    "body": [
      "const formRef = ref(null);",
      "const handleSubmit = async (done) => {",
      "  const res = await formRef.value?.validate();",
      "",
      "  if (res) return;",
      "};"
    ],
    "description": "form-submit"
  },
  "form-validate": {
    "prefix": "form-validate",
    "body": [
      "const res = await formRef.value?.validate();",
      "  ",
      "if (res) return;"
    ],
    "description": "form-validate"
  },
  "use-modal": {
    "prefix": "use-modal",
    "body": [
      "import useModal from '@/hooks/useModal';",
      "import { add, update} from '';",
      "const emit = defineEmits(['update']);",
      "const { visible, editType, form, show, hide, formRef, handleSubmit } =",
      "    useModal({",
      "      emit,",
      "      add,",
      "      update,",
      "      defaultForm: {",
      "        name: '',",
      "        nick_name: '',",
      "        deptId: '',",
      "      },",
      "    });",
      "",
      "  defineExpose({",
      "    show,",
      "  });"
    ],
    "description": "use-modal"
  },
  "form switch": {
    "prefix": "form-switch",
    "body": [
      "<a-form-item field=\"${1}\" label=\"${2}\" :rules=\"[]\">",
      "  <a-switch v-model=\"form.${1}\"></a-switch>",
      "</a-form-item>"
    ],
    "description": "form switch"
  },
  "form radio map": {
    "prefix": "form-radio-map",
    "body": [
      "<a-form-item",
      "  field=\"${1}\"",
      "  label=\"${2}\"",
      "  :rules=\"[{ required: true, message: '请输入' }]\"",
      ">",
      "  <a-radio-group v-model=\"form.${1}\">",
      "    <a-radio",
      "      v-for=\"[key,item] in ${3}\"",
      "      :key=\"key\"",
      "      :value=\"key\"",
      "    >",
      "      {{ item }}",
      "    </a-radio>",
      "  </a-radio-group>",
      "</a-form-item>"
    ],
    "description": "form radio map"
  },
  "form radio array": {
    "prefix": "form-radio-array",
    "body": [
      "<a-form-item",
      "  field=\"${1}\"",
      "  label=\"${2}\"",
      "  :rules=\"[{ required: true, message: '请输入' }]\"",
      ">",
      "  <a-radio-group v-model=\"form.${1}\">",
      "    <a-radio",
      "      v-for=\"(item, index) in ${3}\"",
      "      :key=\"index\"",
      "      :value=\"index\"",
      "    >",
      "      {{ item }}",
      "    </a-radio>",
      "  </a-radio-group>",
      "</a-form-item>"
    ],
    "description": "form radio array"
  },
  "form select array": {
    "prefix": "form-select-array",
    "body": [
      "<a-form-item",
      "  field=\"${1}\"",
      "  label=\"${2}\"",
      "  :rules=\"[{ required: true, message: '请输入' }]\"",
      ">",
      "  <a-select v-model=\"form.${1}\" placeholder=\"请选择\">",
      "    <a-option",
      "      v-for=\"(item,index) in ${3}\"",
      "      :key=\"index\"",
      "      :value=\"\"",
      "    >",
      "      {{ item }}",
      "    </a-option>",
      "  </a-select>",
      "</a-form-item>"
    ],
    "description": "form select array"
  },
  "form select map": {
    "prefix": "form-select-map",
    "body": [
      "<a-form-item",
      "  field=\"${1}\"",
      "  label=\"${2}\"",
      "  :rules=\"[{ required: true, message: '请输入' }]\"",
      ">",
      "  <a-select v-model=\"form.${1}\" placeholder=\"请选择\">",
      "    <a-option",
      "      v-for=\"[key, item] in ${3}\"",
      "      :key=\"key\"",
      "      :value=\"key\"",
      "    >",
      "      {{ item }}",
      "    </a-option>",
      "  </a-select>",
      "</a-form-item>"
    ],
    "description": "form select map"
  },
  "form textarea": {
    "prefix": "form-textarea",
    "body": [
      "<a-form-item field=\"${1}\" label=\"${2}\" :rules=\"[{ required: true, message: '请输入' }]\">",
      "  <a-textarea v-model=\"form.${1}\"></a-textarea>",
      "</a-form-item>"
    ],
    "description": "form textarea"
  },
  "form number": {
    "prefix": "form-number",
    "body": [
      "<a-form-item field=\"${1}\" label=\"${2}\" :rules=\"[{ required: true, message: '请输入' }]\">",
      "  <a-input-number v-model=\"form.${1}\"></a-input-number>",
      "</a-form-item>"
    ],
    "description": "form number"
  },
  "form input": {
    "prefix": "form-input",
    "body": [
      "<a-form-item field=\"${1}\" label=\"${2}\" :rules=\"[{ required: true, message: '请输入' }]\">",
      "  <a-input v-model=\"form.${1}\"></a-input>",
      "</a-form-item>"
    ],
    "description": "form input"
  }
}