adweb3-web/src/views/adweb/subscribePlan/components/IntegrityCheckingDrawer.vue

<template>
  <a-drawer title="物料检测标准" :width="1200" v-model:open="visible" :body-style="{ paddingBottom: '24px' }" @close="closeDraw">
    <a-row :gutter="16" style="margin-bottom: 20px">
      <a-col :span="3">
        <a-button type="primary" @click="submitAll" :loading="loading" :disabled="submitDisable"> 保存 </a-button>
      </a-col>
    </a-row>
    <a-table :columns="columns" :data-source="data" :pagination="false">
      <template v-for="col in ['weight']" #[col]="text, record, index" :key="col">
        <div>
          <a-input-number
            v-if="record.editable"
            style="margin: -5px 0"
            :value="text"
            :autoFocus="true"
            @change="(e) => handleChange(e, record.key, col)"
            :min="0"
            :step="0.1"
            :formatter="
              (value) => {
                let reg = /^(-)*(\d+)\.(\d).*$/;
                return `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',').replace(reg, '$1$2.$3');
              }
            "
            :parser="
              (value) => {
                let reg = /^(-)*(\d+)\.(\d).*$/;
                return value.replace(/\s?|(,*)/g, '').replace(reg, '$1$2.$3');
              }
            "
          />
          <template v-else>
            {{ text }}
          </template>
        </div>
      </template>
      <template v-for="col in ['limitMin']" #[col]="text, record, index" :key="col">
        <div>
          <a-input-number
            v-if="record.editable"
            style="margin: -5px 0"
            :value="text"
            @change="(e) => handleChange(e, record.key, col)"
            :min="0"
            :step="1"
            :autoFocus="true"
            :formatter="
              (value) => {
                if (typeof value === 'string') {
                  return !isNaN(Number(value)) ? value.replace(/^(0+)|[^\d]/g, '') : '';
                } else if (typeof value === 'number') {
                  return !isNaN(value) ? String(value).replace(/^(0+)|[^\d]/g, '') : '';
                } else {
                  return '';
                }
              }
            "
          />
          <template v-else>
            {{ text }}
          </template>
        </div>
      </template>

      <template #required="text, record">
        <a-switch
          checked-children="是"
          un-checked-children="否"
          :autoFocus="true"
          :checked="record.required === 0"
          @change="changeRequired(record)"
          :loading="changeLoading"
        />
      </template>

      <template #operation="text, record, index">
        <div class="editable-row-operations">
          <span v-if="record.editable">
            <a @click="() => save(record.key)">保存</a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定取消吗?" @confirm="() => cancel(record.key)">
              <a>取消</a>
            </a-popconfirm>
          </span>
          <span v-else>
            <a :disabled="editingKey !== ''" @click="() => edit(record.key)">编辑</a>
          </span>
        </div>
      </template>
      <template #sort="text, record, index">
        <a-tag color="pink" @click="up(index)" style="cursor: pointer" :class="index == 0 ? 'disabled' : ''">
          <a-icon type="arrow-up" />
        </a-tag>
        <a-tag color="blue" @click="down(index)" style="cursor: pointer" :class="index === data.length - 1 ? 'disabled' : ''">
          <a-icon type="arrow-down" />
        </a-tag>
      </template>
    </a-table>
  </a-drawer>
</template>

<script>
  import { getAction, postAction } from '/src/api/manage/manage';

  export default {
    name: 'IntegrityCheckingDrawer',

    data() {
      return {
        visible: false,
        columns: [
          {
            title: '物料名称',
            dataIndex: 'materialLabel',
            align: 'center',
          },
          {
            title: '最低限制',
            dataIndex: 'limitMin',
            align: 'center',
            scopedSlots: { customRender: 'limitMin' },
          },
          {
            title: '评分占比',
            dataIndex: 'weight',
            align: 'center',
            scopedSlots: { customRender: 'weight' },
          },
          {
            title: '是否必填',
            dataIndex: 'required',
            align: 'center',
            scopedSlots: { customRender: 'required' },
          },
          {
            title: '排序',
            dataIndex: 'sort',
            align: 'center',
            scopedSlots: { customRender: 'sort' },
          },
          {
            title: '操作',
            dataIndex: 'operation',
            align: 'center',
            scopedSlots: { customRender: 'operation' },
          },
        ],
        data: [],
        cacheData: [],
        editingKey: '',
        sortChanged: false, // 判断排序是否改变，排序改变则在关闭的时候进行统一保存
        loading: false,
        loading2: false,
        id: '',
        changeLoading: false,
        submitDisable: false,
      };
    },
    methods: {
      submitAll() {
        let d = this.data;
        let weight = 0;
        for (let i in d) {
          weight += parseFloat(d[i].weight);
        }
        if (parseFloat(weight) !== 100) {
          this.$message.error('权重之和应为100');
          return;
        }
        this.loading = true;
        postAction('/serp/seoMarketPlan/saveTemplate', {
          checkList: JSON.stringify(d),
          planId: this.id,
        })
          .then((res) => {
            this.loading = false;
            if (res.code == 200) {
              this.$message.success('保存成功');
              this.showDrawer(this.id);
            } else {
              this.$message.error(res.message);
            }
          })
          .catch((e) => {
            this.$message.error('保存数据失败！');
          });
      },
      showDrawer(id) {
        let that = this;
        that.id = id;
        getAction('/serp/seoMarketPlan/integrityChecking?planId=' + id)
          .then((res) => {
            if (res.success) {
              that.data = res.result;
              for (let i = 0; i < that.data.length; i++) {
                let item = that.data[i];
                item.key = item.id;
              }
              that.cacheData = that.data.map((item) => ({ ...item }));
            }
          })
          .catch((e) => {
            this.$message.warning('获取数据失败！');
          });
        this.visible = true;
      },
      closeDraw() {
        let that = this;
        that.visible = false;
        that.data = [];
        that.cacheData = [];
        that.sortChanged = false;
        that.record = {};
      },
      handleChange(value, key, column) {
        const newData = [...this.data];
        const target = newData.filter((item) => key === item.key)[0];
        if (target) {
          target[column] = value == null ? '' : value;
          this.data = newData;
        }
      },
      edit(key) {
        const newData = [...this.data];
        const target = newData.filter((item) => key === item.key)[0];
        this.editingKey = key;
        if (target) {
          target.editable = true;
          this.data = newData;
        }
        this.submitDisable = true;
      },
      save(key) {
        const newData = [...this.data];
        const newCacheData = [...this.cacheData];
        const target = newData.filter((item) => key === item.key)[0];
        const targetCache = newCacheData.filter((item) => key === item.key)[0];
        if (target && targetCache) {
          delete target.editable;
          this.data = newData;
          Object.assign(targetCache, target);
          this.cacheData = newCacheData;
        }
        this.editingKey = '';
        this.submitDisable = false;
      },
      cancel(key) {
        const newData = [...this.data];
        const target = newData.filter((item) => key === item.key)[0];
        this.editingKey = '';
        if (target) {
          Object.assign(target, this.cacheData.filter((item) => key === item.key)[0]);
          delete target.editable;
          this.data = newData;
        }
        this.submitDisable = false;
      },
      up(index) {
        let that = this;
        if (that.editingKey !== '') {
          that.$message.warn('请先完成编辑！');
          return;
        }
        if (index === 0) {
          return;
        }

        that.sortChanged = true;

        // 修改展示顺序
        let data2 = that.data;
        let temp1 = data2[index];
        data2[index] = data2[index - 1];
        data2[index - 1] = temp1;
        that.cacheData = data2.map((item) => ({ ...item }));
        that.data = that.cacheData;
      },
      down(index) {
        let that = this;
        if (that.editingKey !== '') {
          that.$message.warn('请先完成编辑！');
          return;
        }
        if (index === that.data.length - 1) {
          return;
        }
        that.sortChanged = true;
        // 修改展示顺序
        let data2 = that.data;
        let temp1 = data2[index];
        data2[index] = data2[index + 1];
        data2[index + 1] = temp1;
        that.cacheData = data2.map((item) => ({ ...item }));
        that.data = that.cacheData;
      },

      changeRequired(record) {
        let that = this;
        that.changeLoading = true;
        postAction('/materialcollect/changeRequired?id=' + record.id + '&planId=' + record.planId).then((res) => {
          if (res.success) {
            that.$message.success(res.result);
            that.showDrawer(that.id);
          } else {
            that.$message.error(res.message);
          }
          that.changeLoading = false;
        });
      },
    },
  };
</script>
<style lang="less" scoped>
  .ant-tag.disabled {
    cursor: no-drop !important;
    opacity: 0.3;
  }
</style>