{"remainingRequest":"D:\\源码\\vue-element-admin-master\\node_modules\\babel-loader\\lib\\index.js!D:\\源码\\vue-element-admin-master\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!D:\\源码\\vue-element-admin-master\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\源码\\vue-element-admin-master\\src\\views\\table\\inline-edit-table.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\源码\\vue-element-admin-master\\src\\views\\table\\inline-edit-table.vue","mtime":1649647926000},{"path":"D:\\源码\\vue-element-admin-master\\babel.config.js","mtime":1649647926000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:aW1wb3J0IF9hc3luY1RvR2VuZXJhdG9yIGZyb20gIkQ6L1x1NkU5MFx1NzgwMS92dWUtZWxlbWVudC1hZG1pbi1tYXN0ZXIvbm9kZV9tb2R1bGVzL0BiYWJlbC9ydW50aW1lL2hlbHBlcnMvZXNtL2FzeW5jVG9HZW5lcmF0b3IuanMiOwppbXBvcnQgInJlZ2VuZXJhdG9yLXJ1bnRpbWUvcnVudGltZS5qcyI7CmltcG9ydCAiY29yZS1qcy9tb2R1bGVzL2VzLmFycmF5Lm1hcC5qcyI7Ci8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCi8vCmltcG9ydCB7IGZldGNoTGlzdCB9IGZyb20gJ0AvYXBpL2FydGljbGUnOwpleHBvcnQgZGVmYXVsdCB7CiAgbmFtZTogJ0lubGluZUVkaXRUYWJsZScsCiAgZmlsdGVyczogewogICAgc3RhdHVzRmlsdGVyOiBmdW5jdGlvbiBzdGF0dXNGaWx0ZXIoc3RhdHVzKSB7CiAgICAgIHZhciBzdGF0dXNNYXAgPSB7CiAgICAgICAgcHVibGlzaGVkOiAnc3VjY2VzcycsCiAgICAgICAgZHJhZnQ6ICdpbmZvJywKICAgICAgICBkZWxldGVkOiAnZGFuZ2VyJwogICAgICB9OwogICAgICByZXR1cm4gc3RhdHVzTWFwW3N0YXR1c107CiAgICB9CiAgfSwKICBkYXRhOiBmdW5jdGlvbiBkYXRhKCkgewogICAgcmV0dXJuIHsKICAgICAgbGlzdDogbnVsbCwKICAgICAgbGlzdExvYWRpbmc6IHRydWUsCiAgICAgIGxpc3RRdWVyeTogewogICAgICAgIHBhZ2U6IDEsCiAgICAgICAgbGltaXQ6IDEwCiAgICAgIH0KICAgIH07CiAgfSwKICBjcmVhdGVkOiBmdW5jdGlvbiBjcmVhdGVkKCkgewogICAgdGhpcy5nZXRMaXN0KCk7CiAgfSwKICBtZXRob2RzOiB7CiAgICBnZXRMaXN0OiBmdW5jdGlvbiBnZXRMaXN0KCkgewogICAgICB2YXIgX3RoaXMgPSB0aGlzOwoKICAgICAgcmV0dXJuIF9hc3luY1RvR2VuZXJhdG9yKCAvKiNfX1BVUkVfXyovcmVnZW5lcmF0b3JSdW50aW1lLm1hcmsoZnVuY3Rpb24gX2NhbGxlZSgpIHsKICAgICAgICB2YXIgX3lpZWxkJGZldGNoTGlzdCwgZGF0YSwgaXRlbXM7CgogICAgICAgIHJldHVybiByZWdlbmVyYXRvclJ1bnRpbWUud3JhcChmdW5jdGlvbiBfY2FsbGVlJChfY29udGV4dCkgewogICAgICAgICAgd2hpbGUgKDEpIHsKICAgICAgICAgICAgc3dpdGNoIChfY29udGV4dC5wcmV2ID0gX2NvbnRleHQubmV4dCkgewogICAgICAgICAgICAgIGNhc2UgMDoKICAgICAgICAgICAgICAgIF90aGlzLmxpc3RMb2FkaW5nID0gdHJ1ZTsKICAgICAgICAgICAgICAgIF9jb250ZXh0Lm5leHQgPSAzOwogICAgICAgICAgICAgICAgcmV0dXJuIGZldGNoTGlzdChfdGhpcy5saXN0UXVlcnkpOwoKICAgICAgICAgICAgICBjYXNlIDM6CiAgICAgICAgICAgICAgICBfeWllbGQkZmV0Y2hMaXN0ID0gX2NvbnRleHQuc2VudDsKICAgICAgICAgICAgICAgIGRhdGEgPSBfeWllbGQkZmV0Y2hMaXN0LmRhdGE7CiAgICAgICAgICAgICAgICBpdGVtcyA9IGRhdGEuaXRlbXM7CiAgICAgICAgICAgICAgICBfdGhpcy5saXN0ID0gaXRlbXMubWFwKGZ1bmN0aW9uICh2KSB7CiAgICAgICAgICAgICAgICAgIF90aGlzLiRzZXQodiwgJ2VkaXQnLCBmYWxzZSk7IC8vIGh0dHBzOi8vdnVlanMub3JnL3YyL2d1aWRlL3JlYWN0aXZpdHkuaHRtbAoKCiAgICAgICAgICAgICAgICAgIHYub3JpZ2luYWxUaXRsZSA9IHYudGl0bGU7IC8vICB3aWxsIGJlIHVzZWQgd2hlbiB1c2VyIGNsaWNrIHRoZSBjYW5jZWwgYm90dG9uCgogICAgICAgICAgICAgICAgICByZXR1cm4gdjsKICAgICAgICAgICAgICAgIH0pOwogICAgICAgICAgICAgICAgX3RoaXMubGlzdExvYWRpbmcgPSBmYWxzZTsKCiAgICAgICAgICAgICAgY2FzZSA4OgogICAgICAgICAgICAgIGNhc2UgImVuZCI6CiAgICAgICAgICAgICAgICByZXR1cm4gX2NvbnRleHQuc3RvcCgpOwogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgfSwgX2NhbGxlZSk7CiAgICAgIH0pKSgpOwogICAgfSwKICAgIGNhbmNlbEVkaXQ6IGZ1bmN0aW9uIGNhbmNlbEVkaXQocm93KSB7CiAgICAgIHJvdy50aXRsZSA9IHJvdy5vcmlnaW5hbFRpdGxlOwogICAgICByb3cuZWRpdCA9IGZhbHNlOwogICAgICB0aGlzLiRtZXNzYWdlKHsKICAgICAgICBtZXNzYWdlOiAnVGhlIHRpdGxlIGhhcyBiZWVuIHJlc3RvcmVkIHRvIHRoZSBvcmlnaW5hbCB2YWx1ZScsCiAgICAgICAgdHlwZTogJ3dhcm5pbmcnCiAgICAgIH0pOwogICAgfSwKICAgIGNvbmZpcm1FZGl0OiBmdW5jdGlvbiBjb25maXJtRWRpdChyb3cpIHsKICAgICAgcm93LmVkaXQgPSBmYWxzZTsKICAgICAgcm93Lm9yaWdpbmFsVGl0bGUgPSByb3cudGl0bGU7CiAgICAgIHRoaXMuJG1lc3NhZ2UoewogICAgICAgIG1lc3NhZ2U6ICdUaGUgdGl0bGUgaGFzIGJlZW4gZWRpdGVkJywKICAgICAgICB0eXBlOiAnc3VjY2VzcycKICAgICAgfSk7CiAgICB9CiAgfQp9Ow=="},{"version":3,"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA;AAEA;EACAA,uBADA;EAEAC;IACAC,YADA,wBACAC,MADA,EACA;MACA;QACAC,oBADA;QAEAC,aAFA;QAGAC;MAHA;MAKA;IACA;EARA,CAFA;EAYAC,IAZA,kBAYA;IACA;MACAC,UADA;MAEAC,iBAFA;MAGAC;QACAC,OADA;QAEAC;MAFA;IAHA;EAQA,CArBA;EAsBAC,OAtBA,qBAsBA;IACA;EACA,CAxBA;EAyBAC;IACAC,OADA,qBACA;MAAA;;MAAA;QAAA;;QAAA;UAAA;YAAA;cAAA;gBACA;gBADA;gBAAA,OAEAC,0BAFA;;cAAA;gBAAA;gBAEAT,IAFA,oBAEAA,IAFA;gBAGAU,KAHA,GAGAV,UAHA;gBAIA;kBACA,6BADA,CACA;;;kBACAW,0BAFA,CAEA;;kBACA;gBACA,CAJA;gBAKA;;cATA;cAAA;gBAAA;YAAA;UAAA;QAAA;MAAA;IAUA,CAXA;IAYAC,UAZA,sBAYAC,GAZA,EAYA;MACAA;MACAA;MACA;QACAC,4DADA;QAEAC;MAFA;IAIA,CAnBA;IAoBAC,WApBA,uBAoBAH,GApBA,EAoBA;MACAA;MACAA;MACA;QACAC,oCADA;QAEAC;MAFA;IAIA;EA3BA;AAzBA","names":["name","filters","statusFilter","status","published","draft","deleted","data","list","listLoading","listQuery","page","limit","created","methods","getList","fetchList","items","v","cancelEdit","row","message","type","confirmEdit"],"sourceRoot":"src/views/table","sources":["inline-edit-table.vue"],"sourcesContent":["<template>\n  <div class=\"app-container\">\n    <el-table v-loading=\"listLoading\" :data=\"list\" border fit highlight-current-row style=\"width: 100%\">\n      <el-table-column align=\"center\" label=\"ID\" width=\"80\">\n        <template slot-scope=\"{row}\">\n          <span>{{ row.id }}</span>\n        </template>\n      </el-table-column>\n\n      <el-table-column width=\"180px\" align=\"center\" label=\"Date\">\n        <template slot-scope=\"{row}\">\n          <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>\n        </template>\n      </el-table-column>\n\n      <el-table-column width=\"120px\" align=\"center\" label=\"Author\">\n        <template slot-scope=\"{row}\">\n          <span>{{ row.author }}</span>\n        </template>\n      </el-table-column>\n\n      <el-table-column width=\"100px\" label=\"Importance\">\n        <template slot-scope=\"{row}\">\n          <svg-icon v-for=\"n in + row.importance\" :key=\"n\" icon-class=\"star\" class=\"meta-item__icon\" />\n        </template>\n      </el-table-column>\n\n      <el-table-column class-name=\"status-col\" label=\"Status\" width=\"110\">\n        <template slot-scope=\"{row}\">\n          <el-tag :type=\"row.status | statusFilter\">\n            {{ row.status }}\n          </el-tag>\n        </template>\n      </el-table-column>\n\n      <el-table-column min-width=\"300px\" label=\"Title\">\n        <template slot-scope=\"{row}\">\n          <template v-if=\"row.edit\">\n            <el-input v-model=\"row.title\" class=\"edit-input\" size=\"small\" />\n            <el-button\n              class=\"cancel-btn\"\n              size=\"small\"\n              icon=\"el-icon-refresh\"\n              type=\"warning\"\n              @click=\"cancelEdit(row)\"\n            >\n              cancel\n            </el-button>\n          </template>\n          <span v-else>{{ row.title }}</span>\n        </template>\n      </el-table-column>\n\n      <el-table-column align=\"center\" label=\"Actions\" width=\"120\">\n        <template slot-scope=\"{row}\">\n          <el-button\n            v-if=\"row.edit\"\n            type=\"success\"\n            size=\"small\"\n            icon=\"el-icon-circle-check-outline\"\n            @click=\"confirmEdit(row)\"\n          >\n            Ok\n          </el-button>\n          <el-button\n            v-else\n            type=\"primary\"\n            size=\"small\"\n            icon=\"el-icon-edit\"\n            @click=\"row.edit=!row.edit\"\n          >\n            Edit\n          </el-button>\n        </template>\n      </el-table-column>\n    </el-table>\n  </div>\n</template>\n\n<script>\nimport { fetchList } from '@/api/article'\n\nexport default {\n  name: 'InlineEditTable',\n  filters: {\n    statusFilter(status) {\n      const statusMap = {\n        published: 'success',\n        draft: 'info',\n        deleted: 'danger'\n      }\n      return statusMap[status]\n    }\n  },\n  data() {\n    return {\n      list: null,\n      listLoading: true,\n      listQuery: {\n        page: 1,\n        limit: 10\n      }\n    }\n  },\n  created() {\n    this.getList()\n  },\n  methods: {\n    async getList() {\n      this.listLoading = true\n      const { data } = await fetchList(this.listQuery)\n      const items = data.items\n      this.list = items.map(v => {\n        this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html\n        v.originalTitle = v.title //  will be used when user click the cancel botton\n        return v\n      })\n      this.listLoading = false\n    },\n    cancelEdit(row) {\n      row.title = row.originalTitle\n      row.edit = false\n      this.$message({\n        message: 'The title has been restored to the original value',\n        type: 'warning'\n      })\n    },\n    confirmEdit(row) {\n      row.edit = false\n      row.originalTitle = row.title\n      this.$message({\n        message: 'The title has been edited',\n        type: 'success'\n      })\n    }\n  }\n}\n</script>\n\n<style scoped>\n.edit-input {\n  padding-right: 100px;\n}\n.cancel-btn {\n  position: absolute;\n  right: 15px;\n  top: 10px;\n}\n</style>\n"]}]}