index.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366
  1. <script>
  2. import { REFER } from "../popover-select/api/index";
  3. export default {
  4. name: "PopoverSelectV2",
  5. props: {
  6. // v-model
  7. value: {
  8. type: [Array, String, Number],
  9. require: true,
  10. },
  11. // 参照类型 ,对应后端
  12. referName: {
  13. type: String,
  14. require: true,
  15. },
  16. // 作为 value 唯一标识的键名,绑定值
  17. valueKey: {
  18. type: String,
  19. dafault: () => {
  20. return "code";
  21. },
  22. },
  23. // 默认查询参数
  24. queryParams: {
  25. type: Function,
  26. default: () => {},
  27. },
  28. // 需映射源数据
  29. source: {
  30. type: Object,
  31. default: () => ({}),
  32. },
  33. // 参照内外映射
  34. dataMapping: {
  35. type: Object,
  36. default: () => ({}),
  37. },
  38. // 多选
  39. checkbox: {
  40. type: Boolean,
  41. default: false,
  42. },
  43. // 参照弹窗标题
  44. title: {
  45. type: String,
  46. dafault: () => {
  47. return "TITEL";
  48. },
  49. },
  50. // 赋值
  51. copy: {
  52. type: Boolean,
  53. default: () => {
  54. return false;
  55. },
  56. },
  57. clearable: {
  58. type: Boolean,
  59. default: true,
  60. },
  61. },
  62. components: {
  63. ElSuperTable: () => import("@/components/super-table/index.vue"),
  64. },
  65. data() {
  66. return {
  67. size: "mini",
  68. width: "50%",
  69. page: { pageNum: 1, pageSize: 10, total: 0 },
  70. visible: false,
  71. loading: false,
  72. model: {
  73. search: "",
  74. isPage: true,
  75. },
  76. data: [],
  77. selectData: [],
  78. };
  79. },
  80. computed: {
  81. innerValue: {
  82. get() {
  83. return this.value;
  84. },
  85. set(value) {
  86. this.$emit("input", value);
  87. },
  88. },
  89. TableColumns() {
  90. const { referName } = this.$props;
  91. return require(`../popover-select/components/${referName}`).default;
  92. },
  93. },
  94. watch: {
  95. innerValue: {
  96. handler: function (newValue) {
  97. if (!newValue) {
  98. const {
  99. $props: { source, dataMapping },
  100. } = this;
  101. for (let key in dataMapping) {
  102. source[key] = undefined;
  103. }
  104. this.$emit("update:source", source);
  105. }
  106. },
  107. },
  108. },
  109. methods: {
  110. // open dialog
  111. async open() {
  112. let { disabled } = this.$attrs;
  113. if (!disabled) {
  114. this.visible = true;
  115. await this.useReset();
  116. }
  117. },
  118. // hide dialog
  119. async hide() {
  120. this.visible = false;
  121. },
  122. // fetch list
  123. async fetchList(prop, page) {
  124. try {
  125. // try
  126. this.loading = true;
  127. const { pageNum, pageSize } = page;
  128. const { referName: type, source, queryParams } = this.$props;
  129. const { code, rows, total } = await REFER(
  130. {
  131. ...prop,
  132. ...queryParams(source),
  133. type: type,
  134. },
  135. {
  136. pageNum,
  137. pageSize,
  138. }
  139. );
  140. if (code === 200) {
  141. this.data = rows;
  142. // 处理新增字段无法映射
  143. let that = this;
  144. this.TableColumns.forEach(({ item, attr }) => {
  145. that.data = that.data.map((d) => {
  146. if (!attr.is && attr.formatter) {
  147. d[item.key] = attr.formatter(d);
  148. }
  149. return d;
  150. });
  151. });
  152. this.page.total = total;
  153. }
  154. } catch (err) {
  155. // catch
  156. console.error(err);
  157. } finally {
  158. // finally
  159. this.loading = false;
  160. }
  161. },
  162. // reset
  163. async useReset() {
  164. this.data = [];
  165. this.page.pageNum = 1;
  166. this.page.pageSize = 10;
  167. this.model.search = null;
  168. await this.fetchList(this.model, this.page);
  169. },
  170. // query
  171. async useQuery() {
  172. await this.fetchList(this.model, this.page);
  173. },
  174. // auto
  175. async useAutocomplete(prop, cb) {
  176. if (prop) {
  177. this.page.pageSize = 10;
  178. this.model.search = prop;
  179. await this.fetchList(this.model, this.page);
  180. await cb(this.data);
  181. } else {
  182. cb([]);
  183. }
  184. },
  185. // select
  186. useSelect(prop) {
  187. this.selectData = prop;
  188. },
  189. // confirm
  190. useConfirm(prop) {
  191. this.hide();
  192. const {
  193. $props: { source, checkbox, valueKey, dataMapping },
  194. } = this;
  195. if (checkbox) {
  196. this.selectData = [...prop];
  197. this.$emit(
  198. "change",
  199. this.selectData.map((item) => {
  200. for (let key in dataMapping) {
  201. item[key] = item[dataMapping[key]];
  202. }
  203. return item;
  204. }),
  205. this.$props
  206. );
  207. } else {
  208. for (let key in dataMapping) {
  209. source[key] = prop[0][dataMapping[key]];
  210. }
  211. this.innerValue = prop[0][valueKey];
  212. this.$emit("update:source", source);
  213. this.$emit("change", prop[0], this.$props);
  214. }
  215. },
  216. async handleChange() {
  217. const { referName } = this.$props;
  218. this.$emit("copyChange", this.innerValue.split(/,|,|\s+/));
  219. },
  220. handleClear() {
  221. this.innerValue = "";
  222. },
  223. },
  224. created() {},
  225. mounted() {},
  226. destroyed() {},
  227. };
  228. </script>
  229. <template>
  230. <div class="popover-select-v2">
  231. <el-input
  232. v-if="copy"
  233. :clearable="clearable"
  234. v-bind="$attrs"
  235. v-model="innerValue"
  236. :size="size"
  237. @clear="handleClear"
  238. @change="handleChange"
  239. @keyup.enter.native="handleChange"
  240. >
  241. <i :size="size" class="el-icon-search" slot="suffix" @click="open"> </i>
  242. </el-input>
  243. <el-autocomplete
  244. v-else
  245. :clearable="clearable"
  246. v-bind="$attrs"
  247. v-model="innerValue"
  248. :value-key="valueKey"
  249. :fetch-suggestions="useAutocomplete"
  250. @select="useConfirm([$event])"
  251. style="width: 100%"
  252. >
  253. <i class="el-icon-search" slot="suffix" @click="open"> </i>
  254. <template slot-scope="{ item }">
  255. <p
  256. style="
  257. text-overflow: ellipsis;
  258. overflow: hidden;
  259. line-height: 15px;
  260. margin: 5px 0;
  261. "
  262. >
  263. {{ item.name }}
  264. </p>
  265. <p
  266. style="
  267. font-size: 12px;
  268. color: #b4b4b4;
  269. line-height: 15px;
  270. margin: 5px 0;
  271. "
  272. >
  273. {{ item.code }}
  274. </p>
  275. </template>
  276. </el-autocomplete>
  277. <el-dialog
  278. :width="width"
  279. :visible.sync="visible"
  280. :show-close="false"
  281. :close-on-click-modal="false"
  282. :close-on-press-escape="false"
  283. append-to-body
  284. >
  285. <div slot="title" style="display: flex; justify-content: space-between">
  286. <el-form
  287. :size="size"
  288. :inline="true"
  289. :model="model"
  290. @submit.native.prevent
  291. style="display: flex; flex-direction: column"
  292. >
  293. <div>
  294. <el-form-item prop="search">
  295. <el-input
  296. v-model="model.search"
  297. @change="useQuery"
  298. @keydown.enter="useQuery"
  299. >
  300. </el-input>
  301. </el-form-item>
  302. <el-form-item>
  303. <el-button icon="el-icon-search" @click="useQuery"
  304. >搜索</el-button
  305. >
  306. <el-button icon="el-icon-refresh" @click="useReset"
  307. >重置</el-button
  308. >
  309. </el-form-item>
  310. </div>
  311. </el-form>
  312. <div>
  313. <el-button
  314. type="primary"
  315. :size="$attrs.size"
  316. :loading="loading"
  317. @click="useConfirm(selectData)"
  318. >
  319. 确认
  320. </el-button>
  321. <el-button :size="$attrs.size" :loading="loading" @click="hide">
  322. 取消
  323. </el-button>
  324. </div>
  325. </div>
  326. <div
  327. v-loading="loading"
  328. style="height: 40vh; display: flex; margin-top: -30px"
  329. >
  330. <el-super-table
  331. v-model="data"
  332. :size="size"
  333. :page="page"
  334. :columns="TableColumns"
  335. :radio="!checkbox"
  336. :checkbox="checkbox"
  337. pagination
  338. highlight-current-row
  339. @pagination="useQuery"
  340. @row-select="useSelect"
  341. @row-dblclick="useConfirm([$event])"
  342. >
  343. </el-super-table>
  344. </div>
  345. </el-dialog>
  346. </div>
  347. </template>
  348. <style scoped>
  349. .popover-select-v2 .el-autocomplete {
  350. width: inherit;
  351. }
  352. .popover-select-v2 .el-autocomplete .el-icon-search {
  353. cursor: pointer;
  354. }
  355. ::v-deep .el-table--mini .el-table__cell {
  356. height: 50px;
  357. }
  358. </style>