123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262 |
- <template>
- <picker :disabled="disabled" class="abow-sel-dict" @change="selChange" :start="start" :end="end" :value="idx"
- :range="listData" range-key="label" :mode="modetype">
- <slot>
- <block v-if="modetype=='selector'">
- <view class="content" :class="{ placeholder: !selData }">
- <text>{{selData&&selData.label?selData.label:placeholder}}</text>
- </view>
- </block>
- <block v-else>
- <view class="content" :class="{ placeholder: !selData }">
- <text>{{ selData ? selData : placeholder }}</text>
- </view>
- </block>
- </slot>
- </picker>
- </template>
- <script>
- export default {
- data() {
- return {
- idx: 0,
- listData: "",
- selData: null
- }
- },
- props: {
- disabled: {
- type: Boolean,
- default: false
- },
- modetype: {
- type: String,
- default: "selector" // selector:单选: multiSelector:联级选择(别用); time:时间; date:日期;
- },
- start: {
- type: String,
- default: ""
- },
- end: {
- type: String,
- default: ""
- },
- // 占位符
- placeholder: {
- type: String,
- default: "无"
- },
- apiUrl: {
- type: String,
- default: ""
- },
- isRecords: {
- type: String,
- default: ""
- },
- postData: {
- type: Object,
- default: null
- },
- keyLabel: {
- type: String,
- default: "name"
- },
- keyId: {
- type: String,
- default: "id"
- },
- daType: {
- type: [String],
- default: "sex"
- },
- list: {
- type: [Array],
- default: () => {
- return []
- }
- },
- setfirst: {
- type: Boolean,
- default: false
- },
- value: {
- type: [Number, String],
- default: ""
- },
- isSelAll: {
- type: Boolean,
- default: false
- }
- },
- watch: {
- daType(val) {
- this.initData()
- },
- value(val) {
- this.init()
- },
- list(val) {
- this.initData()
- }
- },
- created() {
- this.initData(true)
- },
- methods: {
- initData(type) {
- if (this.modetype != 'selector') {
- return false
- }
- if (this.apiUrl) {
- this.loadData(type)
- } else if (this.daType == 'sex') {
- this.listData = [{
- label: "女",
- id: 0
- }, {
- label: "男",
- id: 1
- }]
- this.init(type)
- } else if (this.list && this.list.length > 0) {
- this.listData = this.list.map(item => {
- this.$set(item, 'label', item[this.keyLabel])
- this.$set(item, 'id', item[this.keyId])
- return item
- })
- this.init(type)
- }
- },
- init(type) {
- if (this.modetype == 'date') {
- this.selData = this.formatDate(this.value, "yyyy-MM-dd")
- return false
- }
- if (this.modetype != 'selector') {
- return false
- }
- if (!this.listData || this.listData.length <= 0) {
- this.idx = 0
- this.selData = null
- return false
- }
- if (!this.value && this.listData.length > 0 && this.setfirst) {
- this.idx = 0
- this.selData = this.listData[0]
- this.$emit("input", this.listData)
- this.$emit("change", this.selData)
- return false
- }
- this.listData.forEach((item, index) => {
- if (String(this.value) == String(item.id)) {
- this.idx = index
- this.selData = item
- this.$emit("change", this.selData, type)
- }
- })
- },
- selChange(e) {
- if (this.modetype == 'selector') {
- if (!this.listData || this.listData.length <= 0) {
- return false
- }
- this.idx = parseInt(e.detail.value)
- this.selData = this.listData[this.idx]
- this.$emit("input", this.selData.id)
- this.$emit("change", this.selData)
- } else if (this.modetype == 'date') {
- this.listData = e.detail.value
- var t = new Date(this.listData).getTime()
- this.$emit("input", t)
- this.$emit("change", t)
- } else {
- this.listData = e.detail.value
- this.$emit("input", this.listData)
- this.$emit("change", this.listData)
- }
- },
- loadData(type) {
- this.$tui.request(this.apiUrl, this.postData).then(res => {
- if (res.code == 0) {
- if (this.isRecords) {
- this.listData = res.items[this.isRecords].map((item, index) => {
- return {
- label: item[this.keyLabel],
- id: item[this.keyId]
- }
- });
- } else {
- this.listData = res.items.map((item, index) => {
- return {
- label: item[this.keyLabel],
- id: item[this.keyId]
- }
- });
- }
- console.log(this.isSelAll,'全部全部全部全部11')
- if (this.isSelAll) {
- console.log('全部全部全部全部22')
- this.listData.unshift({
- label:'全部',
- id: ''
- })
- }
- this.init(type)
- }
- }).catch(res => {})
- },
- formatDate(datestr, _temp = "yyyy-MM-dd hh:mm:ss") {
- var _date
- if (datestr) {
- if (!isNaN(datestr)) {
- datestr = new Date(parseInt(datestr))
- }
- var reg = new RegExp('-', "g");
- datestr = String(datestr).replace(reg, '/');
- _date = new Date(datestr);
- } else {
- return ""
- }
- var o = {
- "M+": _date.getMonth() + 1, //月份
- "d+": _date.getDate(), //日
- "h+": _date.getHours(), //小时
- "m+": _date.getMinutes(), //分
- "s+": _date.getSeconds(), //秒
- "q+": Math.floor((_date.getMonth() + 3) / 3), //季度
- "S": _date.getMilliseconds() //毫秒
- };
- if (/(y+)/.test(_temp)) {
- _temp = _temp.replace(RegExp.$1, (_date.getFullYear() + "").substr(4 - RegExp.$1.length));
- }
- for (var k in o) {
- if (new RegExp("(" + k + ")").test(_temp)) {
- _temp = _temp.replace(
- RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
- }
- }
- return _temp;
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .abow-sel-dict {
- flex: 1;
- }
- .content {
- height: 100%;
- width: 100%;
- text-align: right;
- }
- .placeholder {
- height: 100%;
- width: 100%;
- color: #999999;
- }
- </style>
|