<template>
<!-- 报警自动转工单预案 -->
<div class="alarm-work-
order">
<template v-if="companyInfo.companyCode">
<a-spin
:spinning="isLoading"
:delay="500"
:tip="$t('加载中...')">
<div class="edit-view">
<div class="input-
item">
<div class="input-lable text-bold">
<span>{{ $t('预案是否启用') }}</span>
</div>
<div class="input-content">
<a-radio-group v-model="formData.enabled"
:default-value="1">
<a-radio
:value="1">{{ $t('启用') }}</a-radio>
<a-radio
:value="0">{{ $t('禁用') }}</a-radio>
</a-radio-group>
</div>
</div>
<div class="input-
item">
<div class="input-lable text-align">
<span> {{ $t('报警类型
:') }}</span>
</div>
<div class="input-content">
<a-select
collapseTags
mode="multiple"
:maxTagCount="2"
v-model="formData.type"
allowClear
placeholder="请选择"
optionFilterProp="label"
>
<a-select-
option v-for="(
item, index) in type
Options"
:value="
item.value"
:key="index">
{{
item.label }}
</a-select-
option>
</a-select>
</div>
</div>
<div class="input-
item">
<div class="input-lable">
<span> {{ $t('工单派发配置
:') }}</span>
</div>
<div class="table-box" id="tableBox">
<a-table
rowKey="department"
:columns="columns"
:dataSource="tableList"
:scroll="{ x
: '100%' }"
:pagination="false"
>
<template slot="staff" slot-scope="text, record, index">
<a-select
v-model="record.staffConfig"
mode="multiple"
placeholder="选择人员"
optionFilterProp="label"
:maxTagCount="2"
allowClear
@change="val => handleStaffChange(val, 'staffConfig', index)"
>
<a-select-
option
v-for="person in staffList"
:key="person.id"
:label="person.name"
:value="person.id"
:disabled="person.disabled"
>
{{ person.name }}
</a-select-
option>
</a-select>
</template>
<template slot="time" slot-scope="text, record, index">
<a-select
v-model="record.timeConfig"
@change="val => changeTime(val, 'timeConfig', index)"
placeholder="选择期望完成时间"
>
<a-select-
option v-for="
option in time
Options"
:key="
option.value"
:value="
option.value">
{{
option.label }}
</a-select-
option>
</a-select>
</template>
</a-table>
</div>
</div>
<div class="btn-view action-list">
<a-button @click="onSave" type="primary">{{ $t('确定') }}</a-button>
<a-button @click="onCancel" type="normal">{{ $t('取消') }}</a-button>
</div>
</div>
</a-spin>
</template>
</div>
</template>
<script>
export default {
props
: {
orgInfo
: {
type
: Object,
default
: () => {
return {};
},
},
companyInfo
: {
type
: Object,
default
: () => {
return {};
},
},
},
data() {
return {
isLoading
: false,
formData
: {},
type
Options
: [
{
label
: '选项1',
value
: 1,
},
{
label
: '选项2',
value
: 2,
},
{
label
: '选项3',
value
: 3,
},
{
label
: '选项4',
value
: 4,
},
],
columns
: [
{
title
: '部门',
key
: 'department',
dataIndex
: 'department',
ellipsis
: true,
},
{
title
: '用户',
dataIndex
: 'staff',
scopedSlots
: {
customRender
: 'staff' },
key
: 'staff',
},
{
title
: '期望完成时间设定',
dataIndex
: 'time',
scopedSlots
: {
customRender
: 'time' },
key
: 'time',
},
],
tableList
: [
{
department
: '技术部',
staffConfig
: ['001', '002'],
timeConfig
: '24h',
},
{
department
: '技术部',
staffConfig
: [],
timeConfig
: '7d',
},
{
department
: '技术部',
staffConfig
: [],
timeConfig
: '7d',
},
{
department
: '技术部',
staffConfig
: [],
timeConfig
: '7d',
},
{
department
: '技术部',
staffConfig
: [],
timeConfig
: '7d',
},
{
department
: '技术部',
staffConfig
: [],
timeConfig
: '7d',
},
{
department
: '技术部',
staffConfig
: [],
timeConfig
: '7d',
},
{
department
: '技术部',
staffConfig
: [],
timeConfig
: '7d',
},
{
department
: '技术部',
staffConfig
: [],
timeConfig
: '7d',
},
{
department
: '技术部',
staffConfig
: [],
timeConfig
: '7d',
},
{
department
: '技术部',
staffConfig
: [],
timeConfig
: '7d',
},
{
department
: '技术部',
staffConfig
: [],
timeConfig
: '7d',
},
{
department
: '技术部',
staffConfig
: [],
timeConfig
: '7d',
},
{
department
: '技术部',
staffConfig
: [],
timeConfig
: '7d',
},
{
department
: '技术部',
staffConfig
: [],
timeConfig
: '7d',
},
],
time
Options
: [
{ label
: '报警后12小时', value
: '12h' },
{ label
: '报警后24小时', value
: '24h' },
{ label
: '报警后48小时', value
: '48h' },
{ label
: '报警后7日内', value
: '7d' },
],
staffList
: [],
checkedUser
: [],
};
},
mounted() {
this.staffList = [
{ id
: '001', name
: '张三' },
{ id
: '002', name
: '李四' },
{ id
: '003', name
: '王五' },
{ id
: '004', name
: '赵六' },
];
this.updateStatus();
},
methods
: {
changeTime(value, key, index) {
this.updateData(value, key, index);
},
handleStaffChange(value, key, index) {
// 人员只能选择两位
if (value && value.length > 2) {
this.$message.destroy();
return this.$message.warning('人员最多选择2位');
}
this.updateData(value, key, index);
this.updateStatus();
},
updateStatus() {
const selectedIds = new Set();
this.tableList.forEach(row => {
if (Array.isArray(row.staffConfig)) {
row.staffConfig.forEach(id => selectedIds.add(id));
}
});
this.staffList.forEach((person, index) => {
const shouldDisable = selectedIds.has(person.id);
if (person.disabled !== shouldDisable) {
this.$set(this.staffList, index, {
...person,
disabled
: shouldDisable,
});
}
});
},
updateData(value, key, index) {
const target = this.tableList[index];
if (target) this.$set(target, key, value);
},
// 确定
onSave() {},
// 取消
onCancel() {},
},
};
</script>
<style lang="less" scoped>
.alarm-work-
order {
height
: 100%;
width
: 100%;
position
: relative;
box-sizing
: b
order-box;
.edit-view {
width
: 100%;
padding
: 46px 32px 24px 32px;
.input-
item {
width
: 100%;
display
: flex;
margin-bottom
: 22px;
&
:last-child {
margin-bottom
: 0 !important;
}
}
.input-lable {
width
: 88px;
min-width
: 88px;
justify-content
: start;
display
: flex;
color
: #808e9d;
font-size
: 14px;
line-height
: 19px;
margin-right
: 24px;
span {
white-space
: nowrap;
}
}
.text-bold {
font-weight
: bold;
color
: #4e5c6b;
}
.text-align {
align-
items
: center;
}
.btn-view {
display
: flex;
align-
items
: center;
justify-content
: flex-start;
padding-left
: 112px;
margin-top
: 24px;
& > button {
margin-right
: 12px;
}
}
}
}
</style> 代码评审
本文详细解析了如何在Magento中设置商品选项，包括使用$options数组的结构，通过setProductOptions方法进行配置，并解释了相关数据如何存储在sales_flat_order_item表的product_options中。
扫一扫
830
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
